17370845950

通过 javascript 监听 yes 单选按钮的 change 事件，在其被选中时动态禁用或隐藏 no 选项，从而实现单向互斥控制，提升表单交互逻辑性与用户体验。

在 ASP.NET MVC 中使用 @Html.RadioButtonFor 生成的单选按钮，默认属于同一组（name 相同），天然具备“单选”语义；但若需进一步实现选中 YES 后主动禁用/隐藏 NO（即不可反向操作），则需借助客户端脚本增强控制逻辑。

✅ 推荐方案：禁用 NO 按钮（推荐，语义清晰、可访问性好）

    @Html.RadioButtonFor(m => m.ReinstatementType, "1", new { @id = "yesReinstate" })   YES  
    @Html.RadioButtonFor(m => m.ReinstatementType, "2", new { @id = "noReinstate" })   NO

? 说明：disabled = true 不仅阻止点击，还使控件灰显、不参与表单提交，符合无障碍标准（screen reader 会跳过 disabled 元素），是比 display: none 更规范的做法。

? 替代方案：隐藏 NO 选项（谨慎使用）

如确需视觉隐藏（例如 UI 设计强制要求），可用以下方式：

yesRadio.addEventListener("change", function () {
    noRadio.style.display = this.checked ? "none" : "inline";
    // 注意：隐藏 ≠ 禁用！仍可能被提交（若原已选中），建议配合重置值
    if (this.checked && noRadio.checked) {
        noRadio.checked = false;
        // 若后端依赖 ReinstatementType 值，确保 hidden 时无歧义
        document.getElementById("ReinstatementType").value = "1"; // 显式同步模型值（如适用）
    }
});

⚠️ 重要注意事项：

• 避免仅靠 display: none 控制逻辑，因隐藏元素仍存在于 DOM，若用户通过 DevTools 修改或绕过 JS，可能导致数据异常；
• 服务端必须校验 ReinstatementType 的合法性（如只接受 "1" 或 "2"），前端限制仅为体验优化；
• 若页面存在多个同类控件，建议封装为通用函数，避免 ID 冲突；
• 使用 DOMContentLoaded 包裹脚本，确保元素已挂载。

✅ 最佳实践总结

通过上述实现，你既能精准控制单选行为，又能兼顾健壮性与可维护性。