通过监听第一组“是/否”单选按钮的变化，动态启用/禁用并清空第二组（如“晋升/降职”）单选按钮，确保表单逻辑严谨、状态同步。
通过监听第一组“是/否”单选按钮的变化，动态启用/禁用并清空第二组（如“晋升/降职”）单选按钮，确保表单逻辑严谨、状态同步。
在构建业务表单（如人力资源薪酬变更申请）时，常需实现条件式控件交互：例如，仅当用户明确选择“存在变动（Yes）”时，才允许进一步选择“晋升”或“降职”；而一旦切换回“无变动（No）”，不仅需禁用该选项组，还必须清除已选值，防止无效数据提交——这是前端表单校验与用户体验的关键细节。
以下为完整、健壮的实现方案：
✅ HTML 结构（含初始禁用）
<!-- 第一组：是否发生变动 --> <input id="rd1" name="radioGroup1" type="radio" value="Yes" onclick="toggleSecondGroup()"> Yes <input id="rd2" name="radioGroup1" type="radio" value="No" onclick="toggleSecondGroup()"> No <br><br><!-- 第二组：仅在“Yes”时可用（初始禁用） --><input id="rd3" name="radioGroup2" type="radio" value="Promotion" disabled> Promotion <input id="rd4" name="radioGroup2" type="radio" value="Demotion" disabled> Demotion
✅ JavaScript 控制逻辑
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;
}
}
⚠️ 注意事项
- 务必同时操作 disabled 和 checked 属性：仅禁用不重置会导致 DOM 中仍保留 checked="true"，可能被表单序列化误读；
- 推荐使用 addEventListener 替代内联 onclick（更易维护、符合现代实践），但本例为兼容性与简洁性保留内联写法；
- 若需支持键盘导航（如 Tab + 空格），应额外处理 change 事件而非仅 click，以覆盖全交互路径；
- 实际项目中建议封装为可复用函数，支持传入任意两组 radio 的 ID 或 selector。
此方案精准满足业务场景：HR 提交调薪请求时，杜绝“先选 Yes → 选 Demotion → 再切 No 却仍保留 Demotion”的逻辑漏洞，保障数据有效性与界面一致性。
