本文介绍如何通过 javascript 实现单选按钮（radio button）的动态控制：当用户选择“yes”时，自动禁用或隐藏“no”选项，确保逻辑互斥且界面响应及时。
在 ASP.net mvc 中使用 @html.RadioButtonFor 生成的单选按钮，默认属于同一 name 组（由模型属性 ReinstatementType 自动绑定），天然具备单选互斥性。但若需增强交互体验——例如选中 “YES” 后立即禁用或隐藏 “NO”，则需借助客户端脚本实现。
✅ 基础方案：禁用“NO”选项
以下 javaScript 代码监听 #yesReinstate 的 change 事件，一旦其被选中，立即将 #noReinstate 设为 disabled：
? 注意：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 + 脚本）
@Html.RadioButtonFor(m => m.ReinstatementType, "1", new { @id = "yesReinstate" }) YES @Html.RadioButtonFor(m => m.ReinstatementType, "2", new { @id = "noReinstate" }) NO ✅ 总结
- 单选按钮的互斥性由 name 属性保障，javascript 控制的是用户体验与表单约束强度；
- 推荐优先使用 disabled 实现禁用，语义清晰、兼容性好、符合无障碍标准（screen reader 可识别）；
- 如需隐藏，请确保同步 disabled 并注意表单提交行为；
- 始终在 DOMContentLoaded 或 jquery $(document).ready() 中初始化事件监听，避免元素未就绪导致脚本失效。