本文介绍如何通过 javascript 动态控制 html 单选按钮组的启用/禁用状态，并在禁用时自动清除已选项，确保表单逻辑严谨、用户体验一致。
本文介绍如何通过 javascript 动态控制 html 单选按钮组的启用/禁用状态，并在禁用时自动清除已选项，确保表单逻辑严谨、用户体验一致。
在实际表单开发中，常需实现“条件式交互”——例如：仅当用户在第一组单选按钮中选择“Yes”时，才允许操作第二组选项；而一旦切换回“No”，不仅须禁用第二组，还必须清除其当前选中状态，防止提交无效或矛盾数据（如：先选“Yes → Demotion”，再切回“No”，此时“Demotion”仍被提交将导致业务逻辑错误）。
以下为完整、健壮的实现方案：
✅ HTML 结构（含初始禁用）
<!-- 第一组：是否发生薪资变动 --> <input id="rd1" name="radioGroup1" type="radio" value="Yes" onclick="toggleRadioGroup2()"> Yes <input id="rd2" name="radioGroup1" type="radio" value="No" onclick="toggleRadioGroup2()"> No <br><br> <!-- 第二组：变动类型（默认禁用） --> <input id="rd3" name="radioGroup2" type="radio" value="Promotion" disabled> Promotion <input id="rd4" name="radioGroup2" type="radio" value="Demotion" disabled> Demotion
✅ JavaScript 控制逻辑
function toggleRadioGroup2() {
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 属性决定可交互性：设置 element.disabled = true 不仅禁用点击，还会使该控件不参与表单提交，这是比仅设 style.pointerEvents = 'none' 更安全的做法；
- 必须显式清除 checked：HTML 中 的 checked 状态独立于 disabled，即使禁用，若之前已选中，其值仍可能被序列化（尤其在手动收集表单数据时），因此务必在禁用时同步设 checked = false；
-
推荐使用 addEventListener 替代内联 onclick（更利于维护与解耦）：
document.querySelectorAll('input[name="radioGroup1"]').forEach(el => el.addEventListener('change', toggleRadioGroup2) ); - 无障碍支持：禁用状态会自然被屏幕阅读器识别，但建议为第二组添加
此方案简洁可靠，完全满足 HR 薪资变更场景中的业务约束：逻辑清晰、状态可控、无残留选中风险，是表单条件交互的经典实践。
