View original (French)

How to gray out a checkbox in HTML

ekatte -  
 ekatte -
```html
Barreau :
<select onchange="toggleInput(this)"> <option /> <option>Valenciennes</option> <option>Lille</option> <option>Cambrai</option> <option>Douai</option> <option>Péronne</option> <option>Arras</option> <option>Saint-Quentin</option> <option>Avesnes-sur-Helpe</option> </select>
<input type="radio" name="radiobutton" value="Autre" onclick="toggleInput(this)" /> Autre, précisez : <input type="text" name="texte" size="10" id="autreInput" disabled="disabled" />
<script> function toggleInput(element) { var autreInput = document.getElementById('autreInput'); if (element.value === '') { autreInput.disabled = false; } else { autreInput.disabled = true; } } </script>
```

4 answers

  1.
    artragis Posted messages 510 Status Member 146
     
    It is necessary to use JavaScript (be careful, as I haven't done this in a long time, someone will need to confirm my answer)

    to be placed between the <head> and </head> tags 
    <script language="javascript"> /*First, we will check if we have selected an item from the dropdown menu, from there we will determine whether the textbox should be grayed out or not*/ function option_selectionnee(){ if(Valanciennes.selected || Lille.selected || Cambrai.selected || Douai.selected || Péronne.selected || Arras.selected || Saint-Quentin.selected || Avesnes-sur-Helpes.selected){ var champ_autre_actif = true; } else { var champ_autre_actif = false; } return champ_autre_actif } /*This function is simple, it uses the value returned by the option_selectionnee function and then checks the value. If it's true, then we gray it out, otherwise we leave it as is.*/ function griser (){ if(champ_autre_actif=true){ radiobutton.enable=false; texte.enable=false; } }


    Then to be placed in the HTML code 
    <BR>Barreau : <BR> <SELECT onclick="griser()"><OPTION></OPTION> <OPTION>Valenciennes</OPTION> <OPTION>Lille</OPTION> <OPTION>Cambrai</OPTION> <OPTION>Douai</OPTION> <OPTION>Péronne</OPTION> <OPTION>Arras</OPTION> <OPTION>Saint-Quentin</OPTION> <OPTION>Avesnes-sur-Helpe</OPTION> </SELECT>


    As I told you, I don't know if it's good; for my part, I've never done a script for this function, I might have made big mistakes (otherwise, then it's perfect, right?) and someone might give the correct answer shortly.

    However, I want to tell you that it is useless to send a message half an hour later; it changes nothing, and moreover, it even creates the impression that someone has answered you.
    1
  2. ekatte
     
    Hello artragis,

    Thank you for your reply! (but it's strange, the page is cut off and I can't see everything you've written! o.O
    I'm sorry for following up so quickly, I just wanted to make sure my message didn't get forgotten ^^

    Otherwise, I tried your piece of code but unfortunately it doesn't work...
    But I understood the principle and I'm going to try to work on it now, thanks again for your help!!
    1
    1. ekatte
       
      Here it is, I found the solution:

      <script language="javascript">

      /* creation of a function regarding the dropdown menu of the bar */

      function choix_barreau()
      {
      if (Valenciennes.selected || Lille.selected || Cambrai.selected || Douai.selected || Péronne.selected ||
      Arras.selected || Saint-Quentin.selected || Havesnes-sur-Helpes.selected)
      {
      var champ_barreau_autre=true; /* if one of these cities is selected, then the variable becomes true */
      }
      else
      {
      var champ_barreau_autre=false; /* otherwise the variable becomes false */
      }
      return champ_barreau_autre;
      }


      /* creation of a function that "grays out" the "Other, specify" part */

      function griser_barreau()
      {
      if (champ_barreau_autre=true)
      {
      document.getElementById('radiobutton').disabled=true; /* if the variable is true, the button
      cannot be selected */
      document.formulaire.barreau_autre.disabled=true; /* and the "text" part is not activated */
      }
      }
      </script>

      and at the dropdown menu level I put:

      <SELECT onchange="griser_barreau()">
      <OPTION>******</OPTION>
      <OPTION>******</OPTION>
      </SELECT>
      <INPUT TYPE="radio" ID="radiobutton" VALUE="Autre" SIZE="20">

      Actually, you need to use ONCHANGE and not ONCLICK.
      A little info for those who, like me, were searching for how to gray out a box in HTML, ONCHANGE activates as soon as there is a change of state, while ONCLICK is more appropriate for a button.

      Thank you artragis for your help!

      However, this method is not perfect since in this specific case, there is only one radio button, but with several (as I have a bit later in my program) you can still press the other radio buttons, except for the grayed one (with the text box next to it).
      Another small problem, once the box is grayed out, it is impossible to change the state of said box unless you refresh the page.......>.<

      I am searching!
      0
  4. artragis Posted messages 510 Status Member 146
     
    You just need to use getElementById("id of your radio button"), that will be enough.
    Otherwise, you're welcome, I knew it was around that, but for me JS has been a while!
    0
    1. ekatte
       
      Pour le problème de la sélection de plusieurs boutons radios, j'ai trouvé mon problème : j'avais oublié ou mis en trop (je ne me rappelle plus exactement !) un "onchange="griser_barreau()" Par contre, je n'ai toujours pas trouvé de solution en ce qui concerne l'accès à la case "grisée" si elle a eu le malheur de l'être ! J'ai aussi un autre petit problème... Si quelqu'un aurait la gentillesse de m'aider ! Le voici : Dans mon formulaire, si l'utilisateur ne saisit pas de code postal, la page lui demande d'en saisir un. Malheureusement, une fois le code postal saisi, la page continue toujours d'afficher "Veuillez entrer votre CP" ! Comme je n'ai pas pris en compte l'option d'un 2ème code postal, j'aimerais qu'il se contente de celui-ci !! Voilà le bout de mon code concernant le problème : dans la page html => 
      <BR><I><ul>Code Postal : </ul></I><BR><INPUT TYPE="text" NAME="CodePostal" ID="codePostal_1" SIZE="1" maxlength="1" onKeyUp="passer_case_suivante(this,'codePostal_2', 1)"> <INPUT TYPE="text" NAME="CodePostal" ID="codePostal_2" SIZE="1" maxlength="1" onKeyUp="passer_case_suivante(this,'codePostal_3', 1)"> <INPUT TYPE="text" NAME="CodePostal" ID="codePostal_3" SIZE="1" maxlength="1" onKeyUp="passer_case_suivante(this,'codePostal_4', 1)"> <INPUT TYPE="text" NAME="CodePostal" ID="codePostal_4" SIZE="1" maxlength="1" onKeyUp="passer_case_suivante(this,'codePostal_5', 1)"> <INPUT TYPE="text" NAME="CodePostal" ID="codePostal_5" SIZE="1" maxlength="1"><BR>
      dans la page php => 
       if(empty($_GET['codePostal'])) { echo $info="Veuillez entrer votre code postal, svp."; } else { echo "Code Postal : ", $_GET['codePostal'], "<BR>"; }
      J'ai essayé plusieurs solutions en vain !! Je ne vois pas du tout où est mon erreur... Je vous remercie d'avance pour l'attention que vous portez à mon problème !!
      0