It does not let me select the checks associated with radio 1, however when there is nothing selected if it leaves me

1
<head>
  <script>
          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;
              }
            else
              {
              document.getElementById("cami").disabled=false;
              document.getElementById("pack").disabled=false;
              document.getElementById("mark").disabled=false;

              document.getElementById("abog").disabled=false;
              document.getElementById("deli").disabled=false;
              document.getElementById("grui").disabled=false;
              }


           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;
              }

            if (document.getElementById("R3").checked)
            {
              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;
            }

          }
</script>
</head>
<html>  
<form name="categoria">
  <fieldset>
  <legend><h1>Selecciona tu especialidad</h1></legend>
    <input type="radio" name="Especialidad" value="Especialidad1" id="R1" onChange="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>
    
asked by Miguel 05.12.2018 в 13:49
source

1 answer

3

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>
        
    answered by 05.12.2018 в 14:06