如何实现至少勾选一个复选框才可启用表单跳转链接？

问题描述 #

多步骤表单中某一步要求用户必须勾选至少一个复选框才能推进流程，但当前实现存在问题：勾选后CTA可点击，但取消所有勾选后CTA仍能点击并继续流程。

现有代码：

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="answer">
   <div id="row1">
       <span class="answer">
           <input name="PROBLEM" type="checkbox" id="crash" value="crash">
           <label for="crash">Crash/bugs</label>
       </span>
      <span class="answer">
          <input name="PROBLEM" type="checkbox" id="transfer" value="transfer">
          <label for="transfer">Transfer</label>
       </span>
   </div>
</div>
<div class="cta spacebtn">
    <a href="#partfour" class="isDisabled four">下一步</a>
</div>

原有JS #

$('input[name="PROBLEM"]').on('change',function(){
                 $("four").removeClass('isDisabled', this.checked);
             });

问题分析 #

1. 选择器错误：$("four") 无法选中目标元素，目标元素的class是four，应该用.four作为选择器。
2. removeClass用法错误：jQuery的removeClass不支持第二个参数作为条件判断，该写法不会生效。
3. 逻辑漏洞：仅监听单个复选框的状态，未统计所有同name复选框的勾选情况，导致取消最后一个勾选时无法重新禁用CTA。

修复方案 #

1. 修正JS逻辑 #

每次复选框状态变化时，统计所有name="PROBLEM"的复选框中被勾选的数量，根据结果切换CTA的禁用状态：

$('input[name="PROBLEM"]').on('change', function() {
    // 统计被勾选的复选框数量
    const checkedCount = $('input[name="PROBLEM"]:checked').length;
    // 根据数量切换禁用类：有勾选则移除，无勾选则添加
    $('.four').toggleClass('isDisabled', checkedCount === 0);
});

// 页面加载时初始化状态（防止页面刷新后CTA状态异常）
$(function() {
    const checkedCount = $('input[name="PROBLEM"]:checked').length;
    $('.four').toggleClass('isDisabled', checkedCount === 0);
});

2. 添加禁用样式（确保视觉和交互都生效） #

需要给isDisabled类添加CSS样式，让CTA看起来不可点击且无法触发跳转：

.isDisabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

代码说明 #

• $('input[name="PROBLEM"]:checked').length：获取所有被勾选的目标复选框数量，这就是你尝试过的length>0逻辑的正确用法。
• toggleClass('isDisabled', 条件)：当条件为true时添加类，false时移除类，完美适配“有勾选则启用，无勾选则禁用”的需求。
• 页面初始化时执行一次状态检查：避免页面刷新后，复选框状态保留但CTA状态未同步的问题。

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