通过 javascript 监听 yes 单选按钮的 change 事件，在其被选中时动态禁用或隐藏 no 选项，从而实现单向互斥控制，提升表单交互逻辑性与用户体验。
在 ASP.NET MVC 中使用 @Html.RadioButtonFor 生成的单选按钮，默认属于同一组（name 相同），天然具备“单选”语义；但若需进一步实现选中 YES 后主动禁用/隐藏 NO（即不可反向操作），则需借助客户端脚本增强控制逻辑。
✅ 推荐方案：禁用 NO 按钮（推荐，语义清晰、可访问性好）
<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>
// 确保 DOM 加载完成后执行
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 的选中状态（避免数据不一致）
if (this.checked) noRadio.checked = false;
});
// 可选：支持反向逻辑 —— 若用户再选 NO，则重新启用 YES（按需启用）
noRadio.addEventListener("change", function () {
if (this.checked) {
yesRadio.disabled = false;
}
});
}
});
</script>? 说明：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 包裹脚本，确保元素已挂载。
✅ 最佳实践总结
| 目标 | 推荐方式 | 理由 |
|---|---|---|
| 阻止用户选择 NO | element.disabled = true | 语义正确、可访问、防误提交 |
| 完全移除 NO 视觉存在 | CSS display: none + checked = false | 仅限设计强需求，需额外保障数据一致性 |
| 支持双向切换（YES↔NO） | 为两个 radio 分别添加 change 监听器 | 提升灵活性，但需明确业务是否允许反向操作 |
通过上述实现，你既能精准控制单选行为，又能兼顾健壮性与可维护性。
