本文介绍如何通过 javascript 实现单选按钮（radio button）的动态控制：当用户选择“yes”时，自动禁用或隐藏“no”选项，确保逻辑互斥且界面响应及时。
在 ASP.NET MVC 中使用 @Html.RadioButtonFor 生成的单选按钮，默认属于同一 name 组（由模型属性 ReinstatementType 自动绑定），天然具备单选互斥性。但若需增强交互体验——例如选中 “YES” 后立即禁用或隐藏 “NO”，则需借助客户端脚本实现。
✅ 基础方案：禁用“NO”选项
以下 JavaScript 代码监听 #yesReinstate 的 change 事件，一旦其被选中，立即将 #noReinstate 设为 disabled：
<script>
document.addEventListener("DOMContentLoaded", function () {
const yesRadio = document.getElementById("yesReinstate");
const noRadio = document.getElementById("noReinstate");
if (yesRadio && noRadio) {
yesRadio.addEventListener("change", function () {
noRadio.disabled = this.checked;
});
// 可选：反向逻辑 —— 选中 NO 时禁用 YES（保持双向一致性）
noRadio.addEventListener("change", function () {
yesRadio.disabled = this.checked;
});
}
});
</script>? 注意：DOMContentLoaded 确保 DOM 加载完成后再执行脚本；同时校验元素是否存在，避免因渲染顺序导致 getElementById 返回 null。
✨ 进阶方案：隐藏“NO”选项（而非仅禁用）
若希望视觉上彻底移除“NO”选项（例如节省空间或强调决策唯一性），可改用 style.display = 'none'：
yesRadio.addEventListener("change", function () {
noRadio.style.display = this.checked ? 'none' : 'inline';
// 同时建议同步 disabled 状态，防止通过 JS 手动修改绕过
noRadio.disabled = this.checked;
});⚠️ 重要提醒：
- 隐藏（display: none）不等于禁用：被隐藏的 radio 仍会随表单提交（只要它有 value 且未被 disabled）。因此务必配合 disabled = true，否则可能造成后端接收到意外值。
- 若需恢复显示（如取消操作），应同时重置 disabled 和 display，并考虑清空当前选中状态以避免逻辑冲突。
? 完整整合示例（含 HTML + 脚本）
<span class="value">
@Html.RadioButtonFor(m => m.ReinstatementType, "1", new { @id = "yesReinstate" }) YES
@Html.RadioButtonFor(m => m.ReinstatementType, "2", new { @id = "noReinstate" }) NO
</span>
<script>
document.addEventListener("DOMContentLoaded", function () {
const yes = document.getElementById("yesReinstate");
const no = document.getElementById("noReinstate");
if (yes && no) {
const toggleNo = () => {
if (yes.checked) {
no.disabled = true;
no.closest("span")?.style.display = "none"; // 隐藏整个 NO 文本+控件
} else {
no.disabled = false;
no.closest("span")?.style.display = "inline";
}
};
yes.addEventListener("change", toggleNo);
no.addEventListener("change", () => {
// NO 被选中时，恢复 YES 可用性（可选逻辑）
yes.disabled = false;
yes.closest("span")?.style.display = "inline";
});
}
});
</script>✅ 总结
- 单选按钮的互斥性由 name 属性保障，JavaScript 控制的是用户体验与表单约束强度；
- 推荐优先使用 disabled 实现禁用，语义清晰、兼容性好、符合无障碍标准（screen reader 可识别）；
- 如需隐藏，请确保同步 disabled 并注意表单提交行为；
- 始终在 DOMContentLoaded 或 jQuery $(document).ready() 中初始化事件监听，避免元素未就绪导致脚本失效。
