How to select one radio through another?

Question

Let’s say I have 3 inputs of type 'radio' (A,B,C) and I have two other 'radio' (X,Z) At first the radios X,Z will be disabled and can only be self-selected if the radio B or C are clicked, and if I click the radio To, radios(X,Z) should return and be disabled again.

Follow the code as an example, to want to put all this in Javascrip (I do not know if there is another way, but my interest would be JS):

<FORM>
   <fieldset><legend><font color="darkblue"> CAIXA 1 </font></legend>
      <input type="radio" id ="rada" name="planoSaud" />A
      <input type="radio" id="radb" name="planoSaud" />B
      <input type="radio" id="radc" name="planoSaud" />C
   </fieldset> 
</FORM>
<FORM>
   <fieldset><legend><font color="darkblue"> CAIXA 2 </font></legend>
      <input type="radio" id ="radx" name="planoSaud" />X
      <input type="radio" id="radz" name="planoSaud" />Z
   </fieldset>
</FORM>

Thanks!

Answer 1

You can add a eventListener to radios A, B and C. Add also disabled="disabled" to radios X and Y for them to load disabled:

var els = document.querySelectorAll("#rada, #radb, #radc");
for(x=0;x<els.length; x++){
   els[x].addEventListener("change", function() {

   if(this.id == 'rada'){
   }

   document.querySelector('#radx').disabled = document.querySelector('#radz').disabled = this.id == 'rada' ?
   true : false;

   if(this.id == 'rada'){
      document.querySelector('#radx').checked = document.querySelector('#radz').checked = false;
   }

  });
}

<FORM>
   <fieldset><legend><font color="darkblue"> CAIXA 1 </font></legend>
      <input type="radio" id ="rada" name="planoSaud" />A
      <input type="radio" id="radb" name="planoSaud" />B
      <input type="radio" id="radc" name="planoSaud" />C
   </fieldset> 
</FORM>
<FORM>
   <fieldset><legend><font color="darkblue"> CAIXA 2 </font></legend>
      <input disabled="disabled" type="radio" id ="radx" name="planoSaud" />X
      <input disabled="disabled" type="radio" id="radz" name="planoSaud" />Z
   </fieldset>
</FORM>