禁用状态按钮仍触发onclick事件问题求助

这个问题其实是事件委托的特性导致的：当你把按钮的点击事件委托给body时，即便按钮处于禁用状态，点击事件仍然会冒泡到body元素，事件委托机制会检查目标元素是否匹配选择器，只要匹配就会执行回调——而原生disabled属性仅能阻止直接绑定在按钮自身的点击事件，对委托事件无效。

下面给你两种可行的解决方案：

方案一：在回调中直接判断按钮状态 #

在按钮的点击事件回调开头，先检查按钮是否处于禁用状态，如果是则直接终止后续逻辑执行，这是最稳妥的方式：

$("body").on("click", ".btnDamageInvoiceShow", function (e) {
    // 核心判断：如果按钮禁用，直接返回不执行后续代码
    if ($(this).is(':disabled')) {
        return;
    }

    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;
});

方案二：修改事件委托的选择器 #

只给未禁用的按钮绑定点击事件，这样禁用状态的按钮不会触发回调：

$("body").on("click", ".btnDamageInvoiceShow:not(:disabled)", 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;
});

另外可以优化一下你的复选框点击事件代码，让它更简洁：

$(document).on('click', '.damageCheckbox', function () {
    var selectedDamages = $(":checkbox:checked").map(function() {
        return this.id;
    }).get();
    var isEnabled = selectedDamages.length > 0;
    
    // 一行代码完成类名切换和禁用状态设置
    $("#btnDamageInvoiceShow")
        .toggleClass("disabled", !isEnabled)
        .prop("disabled", !isEnabled);
        
    console.log(selectedDamages);
    // 其他业务代码...
});

补充说明 #

你之前尝试的.btnDamageInvoiceShow:disabled选择器绑定事件，是给禁用状态的按钮绑定点击事件，这和你的需求完全相反，所以会导致按钮正常时无法触发事件，而禁用时反而触发——这也是为什么这个尝试无效的原因。

内容的提问来源于stack exchange，提问作者Kar