The first thing is that you have a onChange
in radiobutton1
instead of onClick
but the problem is how are you managing the if
. Think of what a normal cycle would be:
The user clicks on radiobutton2
, for example. Rows 1 and 3 are disabled and there is no problem.
Now the user clicks on the radiobutton1
. Enter the first if
and disable rows 2 and 3 (the 1 was already disabled) so it does not allow to select any check
(you are not enabling the check of row 1 at any time)
If you now click on the radiobutton3
you would enter the else
of the first if
and would enable rows 2 and 3 and then enter the last if
and disable row 2.
It is best to enable and disable each condition and also use else if
to save unnecessary comparisons.
function disable(){
if (document.getElementById("R1").checked){
document.getElementById("cami").disabled=true;
document.getElementById("pack").disabled=true;
document.getElementById("mark").disabled=true;
document.getElementById("abog").disabled=true;
document.getElementById("deli").disabled=true;
document.getElementById("grui").disabled=true;
document.getElementById("font").disabled=false;
document.getElementById("elec").disabled=false;
document.getElementById("tele").disabled=false;
}
else if (document.getElementById("R2").checked){
document.getElementById("cami").disabled=true;
document.getElementById("pack").disabled=true;
document.getElementById("mark").disabled=true;
document.getElementById("font").disabled=true;
document.getElementById("elec").disabled=true;
document.getElementById("tele").disabled=true;
document.getElementById("abog").disabled=false;
document.getElementById("deli").disabled=false;
document.getElementById("grui").disabled=false;
}
else{
document.getElementById("font").disabled=true;
document.getElementById("elec").disabled=true;
document.getElementById("tele").disabled=true;
document.getElementById("abog").disabled=true;
document.getElementById("deli").disabled=true;
document.getElementById("grui").disabled=true;
document.getElementById("cami").disabled=false;
document.getElementById("pack").disabled=false;
document.getElementById("mark").disabled=false;
}
}
<head>
</head>
<html>
<form name="categoria">
<fieldset>
<legend><h1>Selecciona tu especialidad</h1></legend>
<input type="radio" name="Especialidad" value="Especialidad1" id="R1" onClick="disable()"/>Especialidad 1
<input type="radio" name="Especialidad" value="Especialidad2" id="R2" onClick="disable()"/>Especialidad 2
<input type="radio" name="Especialidad" value="Especialidad3" id="R3" onClick="disable()"/>Especialidad 3<br>
<input type="checkbox" name="fontanero" id="font" /> Fontanero
<input type="checkbox" name="electricista" id="elec"/> Electricista
<input type="checkbox" name="teleco" id="tele"/>Teleco<br>
<input type="checkbox" name="abogado" id="abog"/> Abogado
<input type="checkbox" name="delineante" id="deli"/>Delineante
<input type="checkbox" name="gruista" id="grui"/>Gruista<br>
<input type="checkbox" name="camionero" id="cami"/> Camionero
<input type="checkbox" name="packaging" id="pack"/>Packaging
<input type="checkbox" name="marketing" id="mark"/>Repartidores
</fieldset>
</form>
</html>