1

Digamos que eu tenho 3 inputs do tipo 'radio' (A,B,C) e eu tenho outros dois 'radio'(X,Z) Logo de inicio os radios X,Z estarão desabilitados e só poderão ser auto-selecionados se o radio B ou C forem clicados, e se eu clicar no radio A, os radios(X,Z) devem voltar e ficar desabilitadas novamente.

Segue o código como exemplo, to querendo colocar tudo isso em JavaScrip (não sei se tem outra forma, mas o meu interesse seria 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>

Valeu!

1 Resposta 1

1

Você pode adicionar um eventListener aos radios A, B e C. Adicione também disabled="disabled" aos radios X e Y para eles carregarem desabilitados:

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>

5
  • Ali no caso quando eu clicar no Rad'B' e depois clicar no Rad'Z' por exemplo, e sem seguida eu clicar no Rad'A' o Rad'Z' é apenas desabilitado, teria como eu limpar ele, pois ele ainda fica como se estivesse selecionado.
    – Floyd
    Commented 26/11/2017 às 21:01
  • @Ricksoz97 Resposta atualizada.
    – Sam
    Commented 26/11/2017 às 21:07
  • Teria algum outro método que poderia ser utilizando sem usar querySelector? devido a eu estar iniciando ainda a utilizar lógica de programação (tanto pra page web quanto pra software). Ai no caso eu estava utilizando em alguns exercícios o document.getElementById('teste').disabled= false e com o querySelectoreu não estou conseguindo rodar ele direito no JS.
    – Floyd
    Commented 26/11/2017 às 22:06
  • @Ricksoz97 Tem sim... peraí que vou fazer aqui e te mando
    – Sam
    Commented 26/11/2017 às 22:12
  • @Ricksoz97 Aí seria necessário criar um array com os ids dos radios A, B e C. Veja neste JSFiddle: jsfiddle.net/62s22u65
    – Sam
    Commented 26/11/2017 às 22:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .