Disabled button onclick event fires

Question

I have a button on a page, which is disabled if none of the check boxes is selected

If a checkbox is selected the button became enabled. This is working fine, but the on click event is still fires, even if the button is enabled.

This is the code when I click on a checkbox

 $(document).on('click', '.damageCheckbox', function () {

    //$("#btnDamageInvoiceShow").removeClass("disabled");

    var idSelector = function () { return this.id; };
    var selectedDamages = $(":checkbox:checked").map(idSelector).get();

    if (selectedDamages.length > 0)
    {
        $("#btnDamageInvoiceShow").removeClass("disabled");
        $('#btnDamageInvoiceShow').prop("disabled", false);
    }
    else {
        $("#btnDamageInvoiceShow").addClass("disabled");
        $('#btnDamageInvoiceShow').prop("disabled", true);
    }
    console.log(selectedDamages);
    ..... 

and this is the javascript when I press the button:

 $("body").on("click", ".btnDamageInvoiceShow", function (e) {

            var idSelector = function () { return this.id; };
            var selectedDamages = $(":checkbox:checked").map(idSelector).get();
            console.log(selectedDamages);

            var baseUrl = '@Url.Action("ShowDamageInvoice", "TimberMonitor", new { Area = "" })';
            var url = baseUrl + '?' + $.param({ damageIds: selectedDamages }, true);
            location.href = url;
 });

I have try to resolve the problem by adding:

$('#btnDamageInvoiceShow').prop("disabled", false);

I have tried this way:

$("body").on("click", ".btnDamageInvoiceShow:disabled", function (e) {

but this way the button onclick event never fires.

Answer 1

Try

$("body").on("click", ".btnDamageInvoiceShow:not(.disabled)", function (e) {

But, disabled button should never fire an event. Try checking the by HTML inspector if the button has got the disabled attribute or not.

Answer 2

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.

Answer 3

@Kar, when you use checkbox event then you set

 $("#btnDamageInvoiceShow").addClass("disabled");
 $('#btnDamageInvoiceShow').prop("disabled", true);

but when you assign button click then you give

 $("body").on("click", ".btnDamageInvoiceShow", function (e) {})

So, be clear the Name and ID of your ADD Damage button will be btnDamageInvoiceShow If it is then your case works otherwise replace your click event with

 $(document).ready(function(){
   $("body").on("click", "#btnDamageInvoiceShow", function (e) {
      alert("button called");
   })
 })

Let me know is that solutions works?