17370845950

本文介绍如何通过 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() 中初始化事件监听，避免元素未就绪导致脚本失效。