如何根据前一组单选按钮状态动态启用或禁用后一组单选按钮

如何根据前一组单选按钮状态动态启用或禁用后一组单选按钮

在构建业务表单时，比如人力资源的薪酬变更申请，经常会遇到一个典型的交互需求：表单选项之间存在明确的逻辑依赖。具体来说，只有当用户在前一组选项中明确选择了“是”，后续的一组选项才变得有意义且可供操作；一旦用户改变了主意，切换回“否”，那么后续选项不仅需要立刻被禁用，更重要的是，之前可能已经选中的值也必须被彻底清空。这个细节，恰恰是保障表单数据有效性和提升用户体验的关键所在，稍不留神就可能留下逻辑漏洞。

那么，如何实现一个既严谨又健壮的方案呢？以下是完整的实现路径。

✅ HTML 结构（含初始禁用）

 Yes
 No




 Promotion
 Demotion

从结构上看，思路很清晰：第二组单选按钮在页面加载之初就被设置为disabled，确保用户无法在未满足前置条件时进行误操作。

✅ Ja vaScript 控制逻辑

function toggleSecondGroup() {
  const yesChecked = document.getElementById('rd1').checked;
  const noChecked = document.getElementById('rd2').checked;
  const promo = document.getElementById('rd3');
  const demote = document.getElementById('rd4');

  if (yesChecked) {
    // 启用第二组，并保持用户之前的选择（如有）
    promo.disabled = false;
    demote.disabled = false;
  } else if (noChecked) {
    // 禁用 + 强制取消选中（关键！避免残留值）
    promo.disabled = true;
    demote.disabled = true;
    promo.checked = false;
    demote.checked = false;
  }
}

这里的控制逻辑是核心。函数通过监听第一组按钮的点击事件来工作。当检测到用户选择了“Yes”，便解除第二组按钮的禁用状态；而一旦切换回“No”，则立即执行两个关键动作：一是重新禁用按钮，二是将它们的选中状态重置为false。这第二步——清除已选值——往往是容易被忽略但至关重要的一环。

⚠️ 注意事项

• 务必同时操作 disabled 和 checked 属性：如果只禁用而不重置选中状态，虽然在界面上按钮变灰了，但DOM中可能依然保留着checked="true"的属性。这样一来，在表单序列化提交时，程序很可能误读到这个残留的无效值，导致数据错误。
• 推荐使用 addEventListener 替代内联 onclick：从代码可维护性和现代前端实践的角度出发，使用事件监听器是更优的选择。本例为了兼顾兼容性和代码的简洁直观，暂时保留了内联写法。
• 若需支持键盘导航（如 Tab + 空格），应额外处理 change 事件而非仅 click，以覆盖全交互路径；
• 实际项目中建议封装为可复用函数，支持传入任意两组 radio 的 ID 或 selector。

最终，这个方案精准地解决了业务场景中的痛点。想象一下HR的操作流程：先选择“有变动”，接着点选了“降职”，然后突然改变主意，切换回“无变动”。此时，如果方案不完善，“降职”这个选项值就可能被偷偷提交上去。而现在的实现，则彻底杜绝了这类逻辑漏洞，确保了数据有效性与界面状态的高度一致。