禁用按钮 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 事件永远不会触发。

原文由 Kar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

向单击事件处理程序添加检查以确保按钮未被禁用。

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

    // ...
});

如果没有帮助，则该按钮实际上并未被禁用，您需要检查应禁用该按钮的代码。

Also make sure that the button is a <button/> or an <input/> and not a <a/> or <span/> because the disabled 属性仅适用于表单标签。

原文由 Finesse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试

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

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

原文由 Rahul Patel 发布，翻译遵循 CC BY-SA 4.0 许可协议