JavaScript click disabled form button

[Schumiel]

Hallo,

ich habe ein Formular, indem ich gern durch die Benutzereingabe den Weiter-Button deaktivieren lassen möchte. Ich möchte dann aber zusätzlich, wenn der Benutzer doch auf weiter klickt, dass dann paar alerts geschmissen werden. Doch klicke ich auf weiter, komme ich nicht weiter. Das "click OK" wird mir nicht zurück gegeben. Was mache ich falsch?

<button class="next" disabled>weiter</button>

$(document).ready(function(){

    $(".next").prop('disabled', true);

    $(document).on('click', '.next',function() {
        console.log("click OK");
    });

});

 

[Madman1209]

Hi,

man korrigiere mich gerne, aber soweit ich weiß sind DOM events bei disabled Elementen nicht verfügbar.

Tipp: eventl. Overlay Div drüberlegen und auf den Click reagieren.

VG,
Mad

 

[Cool Master]

Das geht nicht. Dadurch, dass der Button deaktiviert wurde wird kein click event ausgelöst.

 

[Yuuri]

Einen deaktivierten Knopf kannst du nicht betätigen.

 

[LencoX2]

Hi,
der Fehler ist der CSS-Selector ".next", der hier gar nichts selektiert und natürlich, dass disabled buttons keine Klickevents auslösen.
Probiere es mal so:

<button class="next" disabled="true">weiter</button>

 

[Schumiel]

LencoX2
sorry, Übertragungsfehler. Die CSS-Klasse "next" habe ich drin.

 

[Cool Master]

Daran lag und liegt es auch nicht. Wie schon geschrieben geht dein Vorhaben so nicht. @Madman1209 hat dir schon ein Vorschlag gemacht.

Auf der anderen Seite muss man aber auch fragen warum willst du das machen? Es ergibt einfach kein Sinn, vor allem wenn der Button dann eh ausgegraut ist und beim Mouse Over ein strich durch den Cursor geht.

 

[Lawnmower]

Oder statt dem regulären disabled Attribut ein eigens data-disable="true" bzw "false" setzen und selber mit eigenem Code (und CSS für Styling) entsprechend reagieren. Es funktioniert, ist aber nicht so hübsch - aber würde ich persönlich jetzt vor der Div Overlay Variante bevorzugen.

 

[T0a5tbr0t]

Wenn du das Click-Event unbedingt brauchst, kannst du den Button einfach mit einem zusätzlichen Element "umhüllen". Wenn der Button den Click nicht verarbeitet, wandert das Event einfach weiter die DOM Elemente hoch.
Etwa so:

<span style="display: inline-block;">
<button type="button" disabled>Test button</button>
</span>

$("span").click(function(e) {
  if ($(e.target).children("button").prop("disabled")) console.log("nope");
});

Edit:
Habs gerade getestet und es muss noch etwas CSS dazu, sonst verschluckt der Button das Event in manchen Browsern (https://stackoverflow.com/a/32925830)

button[disabled] {
  pointer-events: none;
}