根据先前的组禁用单选按钮组

Question

我有 2 组 2 个单选按钮。除非在第 1 组中选择“是”，否则应禁用第 2 组。但是，如果用户从“是”切换，然后在第 2 组中选择某些内容，然后返回并在第一个组中选择“否”，则需要清除并禁用第二组。这是一个示例场景：

人力资源部正在为一名员工提交薪资变更请求。如果他们选择“是”（有变化），那么他们可以选择升级或降级。应该无法单击“是”然后降级，然后更改为“否”。我想太多了。谢谢

                <!-- First Pair Yes or No -->  
                <input id="rd1" name="radioGroup1" type="radio" value="Yes"> Yes</input>
                <input id="rd2" name="radioGroup1" type="radio" value="No"> No</input>
                <br>
                <!-- Second Pair To Disable If No Selected Above -->
                <input id="rd3" name="radioGroup2" type="radio" value="Promotion"> Promotion</input>
                <input id="rd4" name="radioGroup2" type="radio" value="Demotion"> Demotion</input>

                <script>
                    function fn1() {
                        if(rd1.checked==true)
                            // Enable radioGroup2 if Yes selected
                            document.getElementById("rd3").disabled = false;
                        else if(rd2.checked==true)
                            // Disable radioGroup2 if No selected
                    }
                </script>

Answer 1

您可以更改名为“disabled”的属性，顾名思义，它会禁用输入。

您可以根据当前选择的单选按钮动态执行此操作。下面的例子：

<!-- First Pair Yes or No -->
<input id="rd1" name="radioGroup1" type="radio" value="Yes" onclick="fn1()"> Yes</input>
<input id="rd2" name="radioGroup1" type="radio" value="No" onclick="fn1()"> No</input>
<br>
<!-- Second Pair To Disable If No Selected Above -->
<input id="rd3" name="radioGroup2" type="radio" value="Promotion" disabled> Promotion</input>
<input id="rd4" name="radioGroup2" type="radio" value="Demotion" disabled> Demotion</input>

<script>
    function fn1() {
        if (rd1.checked) {
            // Enable radioGroup2 if Yes selected
            document.getElementById("rd3").disabled = false;
            document.getElementById("rd4").disabled = false;
        } else if (rd2.checked) {
            // Disable and clear radioGroup2 if No selected
            document.getElementById("rd3").disabled = true;
            document.getElementById("rd4").disabled = true;
            document.getElementById("rd3").checked = false;
            document.getElementById("rd4").checked = false;
        }
    }
</script>