-1

Gostaria de fazer checkbox de redes sociais, mas que só habilite se a pessoa clicar no type="radio" "sim". como ficaria a function para isso no javascript.

    <label>Possui rede social: </label>
    <input type="radio" name ="social" onclick="habilitar" id="1" > Sim
    <input type="radio" name="social"                      id="2" > Nao <br><br>
    <label>Quais</label><br><br>
    <input type="checkbox" name="facebook"  disabled> facebook<br>
    <input type="checkbox" name="linkedin"  disabled> linkedin<br>
    <input type="checkbox" name="instagram" disabled> instagram<br>
3
  • já viu as perguntas relacionadas aqui no site, por exemplo essa: pt.stackoverflow.com/questions/292060/… ? Commented 11/03/2020 às 9:54
  • dessa forma nao funciona, preciso que apenas habilite, nao que dê checked automatico.
    – Decristony
    Commented 11/03/2020 às 12:38
  • Na sua funcao "habilitar", voce pode remover o atributo "disabled" dos input[checkbox]. Ex: element.removeAttribute("disabled");. Mais info aqui MDN - RemoveAttribute Commented 11/03/2020 às 13:20

2 Respostas 2

0

Coloque values em cada radiobutton. Será útil caso você for submeter ao servidor e útil para usar no script para diferenciar um elemento do outro (não precisa usar id que é desnecessário pra isso):

<input type="radio" name ="social" value="sim"> Sim
<input type="radio" name="social" value="nao" checked> Nao

No primeiro coloque value="sim" e no segundo value="nao".

Já que os checkbox já são carregados desabilitados, é interessante também adicionar o atributo checked na opção "Nao", para ela já vir marcada.

É bom também colocar uma classe em cada checkbox para poder criar um grupo e não confundir com outros checkbox que podem ter na página:

<input class="social" type="checkbox" name="facebook"  disabled> facebook<br>
<input class="social" type="checkbox" name="linkedin"  disabled> linkedin<br>
<input class="social" type="checkbox" name="instagram" disabled> instagram<br>

Com isso, basta criar um evento onchange para cada radiobutton e alterar os checkbox de acordo com o value do radio alterado:

const radios = document.querySelectorAll("[name='social']");
const social = document.querySelectorAll(".social");

for(let i of radios){
   i.onchange = function(){
      for(let x of social){
         x.disabled = i.value == "sim" ? false : true;
      }
   }
}
<label>Possui rede social: </label>
<input type="radio" name ="social" value="sim"> Sim
<input type="radio" name="social" value="nao" checked> Nao <br><br>
<label>Quais</label><br><br>
<input class="social" type="checkbox" name="facebook"  disabled> facebook<br>
<input class="social" type="checkbox" name="linkedin"  disabled> linkedin<br>
<input class="social" type="checkbox" name="instagram" disabled> instagram<br>

1
  • mt obrigado manooo, vlw ajudou mt aqui, estou iniciando nessa area da programaçao e estava em duvidas em como faria o script
    – Decristony
    Commented 11/03/2020 às 16:27
0

Primeiramente você deve alterar os IDs do radio button: Para Sim e Nao

<label>Possui rede social: </label>
<input type="radio" name ="social" 
id="Sim" > Sim
<input type="radio" name="social"                     id="Nao" > Nao <br><br>
<label>Quais</label><br><br>
<input type="checkbox" name="facebook"  disabled> facebook<br>
<input type="checkbox" name="linkedin"  disabled> linkedin<br>
<input type="checkbox" name="instagram" disabled> instagram<br>

JS

const redeS = document.querySelector("#Sim")
const redeN = document.querySelector("#Nao")
const checks = document.querySelectorAll('input[type=checkbox]')

redeS.addEventListener('click', () => {
  if(redeS.checked)
  {
    for(i = 0; i < checks.length; i++)
    {
      checks[i].removeAttribute("disabled")
    }
  }
})

redeN.addEventListener('click', () => {
  if(redeN.checked)
  {
    for(i = 0; i < checks.length; i++)
    {
      checks[i].setAttribute("disabled", "false")
    }
  }
})

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 .