使用jQuery实现复选框选中+选项选择时移除按钮disabled类问题求助

嘿，我帮你梳理下代码里的问题，这几个关键点导致你的逻辑没正常工作：

1. 监听错了对象：你现在监听的是按钮#limitation的change事件，但按钮本身不会触发change呀！应该监听那些会影响判断条件的表单元素——也就是复选框、下拉框、单选框的change事件，它们的状态变化才需要更新按钮的禁用状态。
2. 布尔值判断写法错了：$("#child-limit").is(':checked')返回的是布尔值true或false，你不用把它和字符串"true"做比较，直接用这个表达式就行。
3. 初始状态触发不对：页面加载时你触发的是按钮的change，但按钮没变化，应该直接执行状态检查逻辑来初始化按钮状态。

下面是修复后的完整代码，逻辑更清晰，也能正常工作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.disabled { 
  background: #cdc8c7; 
  pointer-events: none; 
}
</style>
<script>
$(document).ready(function() { 
  // 单独抽离按钮状态更新的函数，方便复用
  function updateLimitationStatus() {
    // 第一个条件：#child-limit选中，且#piller有选中值
    const meetsFirstCondition = $("#child-limit").is(':checked') && $("#piller").val();
    // 第二个条件：#child-limit-1选中、#piller-2有值，且gender单选框选中yes
    const meetsSecondCondition = $("#child-limit-1").is(':checked') && 
                                $("#piller-2").val() && 
                                $('input[name=gender]:checked').val() === "yes";
    
    // 满足任一条件就移除禁用类，否则添加
    if (meetsFirstCondition || meetsSecondCondition) {
      $("#limitation").removeClass("disabled"); 
    } else { 
      $("#limitation").addClass("disabled"); 
    }
  }

  // 给所有相关的表单元素绑定change事件，状态变化就更新按钮
  $("#child-limit, #piller, #child-limit-1, #piller-2, input[name=gender]").on('change', updateLimitationStatus);
  
  // 页面加载完成后立刻执行一次，确保初始状态正确
  updateLimitationStatus();
}); 
</script>

额外优化说明： #

• 把状态更新逻辑抽成独立函数，代码可读性更高，也方便后续维护。
• 把两个条件拆成变量，一眼就能看懂每个条件的含义，避免嵌套逻辑混乱。
• 用on('change')统一绑定事件，比一个个写change()更简洁。

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