复选框全取消后提交按钮无法禁用的技术问题求助

嘿，我帮你排查下这个bug~ 你的代码里有两个关键问题导致了这个现象，咱们一步步来解决：

问题根源 #

1. 逻辑冗余且有漏洞：你用each循环遍历所有复选框，只要找到一个勾选的就立刻启用按钮，但没有处理“后续复选框都未勾选”的情况——比如当最后一个勾选的复选框被取消时，循环里不会触发禁用逻辑，只有循环结束后的判断才会生效，但如果你的代码里tru...是没写完的true（拼写错误），那这行代码直接报错，按钮状态根本不会更新。
2. 效率低下：用each循环遍历判断完全没必要，jQuery自带的选择器就能直接帮你统计勾选的复选框数量。

修复后的代码 #

咱们把逻辑简化，直接用:checked选择器来处理，既简洁又可靠：

// 监听复选框所在面板的change事件
$('.obstructions .panel').on('change', function() { 
    // 判断是否有至少一个复选框被勾选
    var hasCheckedBoxes = $('form input[type="checkbox"]:checked').length > 0;
    // 反向设置按钮禁用状态：没勾选就禁用，有勾选就启用
    $('.btn').prop('disabled', !hasCheckedBoxes);
});

// 页面初始化时也要设置一次按钮状态，避免页面加载时按钮状态错误
$(document).ready(function() {
    var hasCheckedBoxes = $('form input[type="checkbox"]:checked').length > 0;
    $('.btn').prop('disabled', !hasCheckedBoxes);
});

代码解释 #

• $('form input[type="checkbox"]:checked')：直接筛选出表单里所有被勾选的复选框，通过length属性就能知道有没有勾选的，比循环遍历高效太多。
• !hasCheckedBoxes：把判断结果反向赋值给disabled属性——当没有复选框被勾选时，hasCheckedBoxes是false，!false就是true，按钮被禁用；反之则启用按钮。
• 页面初始化的代码很重要：不然刚打开页面时，如果本来就没有复选框被勾选，按钮还是处于启用状态，不符合需求。

原代码的额外问题补充 #

你原来的循环逻辑里，即使已经找到一个勾选的复选框，循环还是会继续遍历剩下的所有复选框，这完全是多余的——可以在找到第一个勾选的后就用return false终止循环，但即使这样，还是不如直接用选择器的方式简洁。另外，一定要注意拼写错误，tru应该是true，不然代码会报错，功能完全失效。

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