javascript - 禁用按钮 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", function (e) {
    if (e.target.disabled) { // or this.disabled
        return;
    }

    // ...
});

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

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