Disabled Button Onclick Event Fires

Disabled button onclick event fires

Add a check to the click event handler to make sure that the button is not disabled.

$("body").on("click", ".btnDamageInvoiceShow", function (e) {
    if (e.target.disabled) { // or this.disabled
        return;
    }

    // ...
});

If it doesn't help, the button is actually not disabled and you need to check the code that should disable the button.

Also make sure that the button is a <button/> or an <input/> and not a <a/> or <span/> because the disabled property works only on form tags.

Allow disabled button to trigger onClick event

You can make a button look like disabled with styles. If you set the disabled attribute to true, it won't trigger onClick because it's not actually listening to it.

You should try something like that:

//disabled button
<button
  style={this.state.passingValidtions ? {
    ...
    opacity: "0.65",
    cursor: "not-allowed"
  } : { ... }} // style can be whatever you want for disabled buttons, it's just an example
  type="submit"
>
  Save
</button>

make disabled button trigger onClick event in react

You need some sort of wrapper, listen to the click event on the wrapper, and set pointer-events: none on the disabled buttons CSS (assuming you want this to work in Firefox, pretty sure it works even without it in Chrome). Not in react but to demonstrate:

document.getElementById('wrapper').addEventListener('click', function() { console.log('wrapper'); });
document.getElementById('button').addEventListener('click', function() { console.log('button'); });
document.getElementById('disabler').addEventListener('click', function() { document.getElementById('button').disabled = !document.getElementById('button').disabled});

[disabled] {
    pointer-events: none;
}

<label><input type="checkbox" checked id="disabler"/> Disabled</label>
<span id="wrapper"><button id="button" disabled>Click</button></span>

On Click When Button is Disabling then Click Button is not firing

Once the button is disabled, the postback is not made. You could re-enable the button at the end of the processing but there is another problem: the display will not be updated when the browser is busy processing OnClickSendEmail(), so the button will never look disabled.

Here is a possible solution, which involves canceling the postback at first and processing the command asynchronously:

<asp:Button ID="ButtonSend2" runat="server" OnClientClick="this.disabled = true; setTimeout(OnClickSendEmail, 0); return false;" ... />

The postback is then triggered with __doPostBack at the end of the lengthy processing:

function OnClickSendEmail() {
    var value = document.getElementById('CE_ctl00_ContentMain_TextArea_ID').getHTML().replace(/ /g, "").trim();
    if (value == "" || value == undefined) {
        $j('#ctl00_ContentMain_lblMessage').text('Message body can\'t be blank!');
        $j('#ctl00_ContentMain_lblMessage').show()    
    } else {
        $j('#ctl00_ContentMain_lblMessage').text('');
        console.log("Value is returing true");
        __doPostBack('<%= ButtonSend2.UniqueID %>', '');
    }
}

Disabled button still fires save method angular HTML

The easiest and best way would be conditionally handling the click event, like you handle disabled attribute.

(click)="someCondition == true ? fnForTrue() : fnForFalse()"

Disabled Button Onclick Event Fires