通过 javascript 监听单选按钮的选中状态，可实现在选择“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 () {
if (this.checked) {
noRadio.disabled = true;
}
});
// 可选：当 YES 取消选中时恢复 NO（如支持反向操作）
noRadio.addEventListener("change", function () {
if (this.checked) {
yesRadio.disabled = true;
}
});
}
});
</script>⚠️ 注意：change 事件比 click 更可靠，因为它仅在用户真正完成选择（焦点离开或值确认）后触发，避免误判中间状态。
✅ 进阶方案：隐藏 “NO” 选项（视觉移除）
若需彻底隐藏而非仅禁用，可将 display: none 应用于 #noReinstate 及其关联文本（注意：隐藏后仍需保留 disabled 属性以防止表单提交非法值）：
yesRadio.addEventListener("change", function () {
if (this.checked) {
noRadio.disabled = true;
noRadio.closest("span.value")?.querySelector("label[for='noReinstate'], #noReinstate + text")?.style.display = "none";
// 更稳妥的做法：为 NO 选项包裹明确容器，例如：
// <span class="radio-option" id="no-option">...NO...</span>
document.getElementById("no-option")?.style.display = "none";
}
});对应 HTML 建议微调以方便控制（推荐）：
<span class="value">
@Html.RadioButtonFor(m => m.ReinstatementType, "1", new { @id = "yesReinstate" })
<label for="yesReinstate">YES</label>
<span id="no-option">
@Html.RadioButtonFor(m => m.ReinstatementType, "2", new { @id = "noReinstate" })
<label for="noReinstate">NO</label>
</span>
</span>? 双向逻辑与重置支持
实际业务中，可能需要支持「取消 YES 后重新启用 NO」。完整双向控制示例如下：
document.addEventListener("DOMContentLoaded", function () {
const yes = document.getElementById("yesReinstate");
const no = document.getElementById("noReinstate");
const noContainer = document.getElementById("no-option");
const updateNoState = () => {
if (yes.checked) {
no.disabled = true;
noContainer.style.display = "none";
} else if (no.checked) {
yes.disabled = true;
document.getElementById("yes-option")?.style.display = "none"; // 如需对称隐藏
} else {
// 两者均未选中 → 全部启用并显示
yes.disabled = false;
no.disabled = false;
noContainer.style.display = "inline";
document.getElementById("yes-option")?.style.display = "inline";
}
};
yes.addEventListener("change", updateNoState);
no.addEventListener("change", updateNoState);
});✅ 总结
- ✅ 使用 change 事件监听更健壮，避免 click 的时序问题；
- ✅ 禁用（disabled）是语义正确且无障碍友好的首选方式；
- ✅ 隐藏（display: none）需配合禁用，否则仍可能被提交；
- ✅ 推荐为每个选项添加语义化 <label> 和独立容器，便于 DOM 操作与可访问性；
- ✅ 在 DOMContentLoaded 中初始化脚本，确保元素已加载完成。
该方案轻量、兼容性强，适用于所有现代浏览器，无需额外依赖库。
