Disable Radio Button Group Depending on Prior Group

Question

I have 2 sets of 2 radio buttons. The 2nd group should be disabled unless Yes is selected in the 1st group. However, the 2nd group needs to be cleared and disabled if the user switches from yes then selects something in group 2 and then goes back and selects no in the first group. Here is an example scenario:

HR Department is submitting a pay change request for an employee. If they select yes (there is a change) then they can select promotion or demotion. Should not be able to click yes then demotion then change to no. I'm overthinking this. Thanks

                <!-- 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

You can change an attribute called disabled which as the name suggests, disables an input.

You can do it dynamically based on the current selected radio button. Example below:

<!-- 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>

The code above should do the trick for the behavior you are expecting from your form.