如何禁用或隐藏单选按钮中的另一个选项_技术教程

通过 javascript 监听单选按钮的选中状态，可实现在选择“yes”时自动禁用或隐藏“no”选项，确保用户无法反向操作，提升表单逻辑严谨性与用户体验。

在 ASP.NET MVC 中使用 @Html.RadioButtonFor 生成的单选按钮，默认属于同一 name 组（由模型属性 ReinstatementType 自动绑定），因此天然具备互斥特性。但若需进一步增强交互逻辑——例如：选中 “YES” 后立即禁用或隐藏 “NO”，则需借助客户端脚本实现。

✅ 基础方案：禁用 “NO” 选项

以下 JavaScript 代码为 #yesReinstate 添加 change 事件监听器，当其被选中时，将 #noReinstate 设为 disabled：

⚠️ 注意：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 选项包裹明确容器，例如：
        // ...NO...
        document.getElementById("no-option")?.style.display = "none";
    }
});

对应 HTML 建议微调以方便控制（推荐）：


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

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

? 双向逻辑与重置支持

实际业务中，可能需要支持「取消 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);
});