已禁用按钮onclick事件触发

Question

我在页面上有一个按钮，如果没有选中任何复选框，则会禁用该按钮

如果选中了复选框，则该按钮变为启用状态。这工作正常，但即使启用了按钮，点击事件仍然会激活。

这是我点击复选框时的代码

 $(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);
    ..... 

这是按下按钮时的javascript：

 $("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;
 });

我尝试通过添加以下内容来解决问题：

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

我试过这种方式：

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

但这样按钮onclick事件永远不会触发。

Answer 1

尝试

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

但是，disabled按钮不应该触发事件。如果按钮具有disabled属性，请尝试通过HTML检查器进行检查。

Answer 2

向click事件处理程序添加一个检查，以确保该按钮未被禁用。

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

    // ...
});

如果它没有帮助，按钮实际上没有被禁用，你需要检查应禁用按钮的代码。

还要确保该按钮是<button/>或<input/>而不是<a/>或<span/>，因为disabled属性仅适用于表单标记

Answer 3

@Kar，当您使用复选框事件时，则设置

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

但是当您指定按钮时，请单击

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

因此，请注意 ADD Damage 按钮的名称和ID btnDamageInvoiceShow 如果是，那么您的案例将起作用，否则请用

替换您的点击事件

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

让我知道解决方案有效吗？