单选按钮选中YES时禁用/隐藏NO选项的实现求助

看起来你是在用ASP.NET MVC的RadioButtonFor生成单选按钮，想实现点击YES后禁用甚至隐藏NO选项对吧？之前用getElementById没成功大概率是脚本执行时机不对，或者事件绑定的方式有问题，我给你两种可行的方案：

方案1：选中YES时禁用NO单选按钮 #

这种方式会让NO按钮变灰，无法被选中，代码如下：

首先确保你的脚本在DOM加载完成后执行（避免找不到元素），可以把这段JS放在页面底部，或者用DOMContentLoaded包裹：

document.addEventListener('DOMContentLoaded', function() {
    // 获取两个单选按钮元素
    const yesBtn = document.getElementById('yesReinstate');
    const noBtn = document.getElementById('noReinstate');

    // 监听YES按钮的状态变化事件
    yesBtn.addEventListener('change', function() {
        // 当YES被选中时禁用NO，否则启用NO
        noBtn.disabled = this.checked;
    });

    // 页面加载时检查初始状态：如果YES默认选中，直接禁用NO
    if (yesBtn.checked) {
        noBtn.disabled = true;
    }
});

为啥用change而不是click？因为用户也可能通过键盘切换单选按钮，change事件能覆盖所有状态变更的场景，更稳妥。

方案2：选中YES时隐藏NO选项（含按钮和文字） #

如果想直接把NO整个选项藏起来，建议先把每个单选按钮和对应的文字包裹在<label>里，这样方便控制整个选项的显示：

先修改你的HTML代码：

<span class="value">
    <label for="yesReinstate">
        @Html.RadioButtonFor(m => m.ReinstatementType, "1", new { @id = "yesReinstate" }) YES
    </label>
    <label id="noReinstateLabel" for="noReinstate">
        @Html.RadioButtonFor(m => m.ReinstatementType, "2", new { @id = "noReinstate" }) NO
    </label>
</span>

然后对应的JS代码：

document.addEventListener('DOMContentLoaded', function() {
    const yesBtn = document.getElementById('yesReinstate');
    const noLabel = document.getElementById('noReinstateLabel');
    const noBtn = document.getElementById('noReinstate');

    yesBtn.addEventListener('change', function() {
        // 隐藏/显示NO选项的容器
        noLabel.style.display = this.checked ? 'none' : 'inline';
        // 同时禁用NO按钮，防止用户通过键盘选中隐藏的选项
        noBtn.disabled = this.checked;
    });

    // 处理初始状态
    if (yesBtn.checked) {
        noLabel.style.display = 'none';
        noBtn.disabled = true;
    }
});

关于你之前的问题：为什么getElementById没生效？ #

很大可能是你的脚本写在了DOM元素之前，比如放在<head>里，这时候浏览器还没渲染出yesReinstate和noReinstate这两个元素，自然获取不到。用DOMContentLoaded或者把脚本放在页面底部（</body>标签之前）就能解决这个问题啦。

备注：内容来源于stack exchange，提问作者Ahmed Nassef