禁用按钮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按钮永远不会触发事件。 尝试检查HTML检查器的按钮是否具有disabled属性。

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损坏”按钮的名称和ID将为btnDamageInvoiceShow。如果是，则说明您的情况有效，否则将您的click事件替换为

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

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