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>
element.removeAttribute("disabled");
. Mais info aqui MDN - RemoveAttribute