Bouton radio activant/desactivant checkbox - adaptation de la FAQ

Version imprimable

Bonjour,

Je dois avouer que je suis novice en javascript. C'est pourquoi je me suis rabattu sur la FAQ où j'ai trouvé à peu près mon bonheur...

Dans la FAQ j'ai pris "Comment désactiver une zone de texte en cochant une checkBox ? ". En fait je veux trois boutons radio, dont l'activation du troisième activera d'autres checkbox. Ces checkbox devrons se désactiver si on active un des deux premières bouton radio.

Et c'est la que se trouve le problème : une fois le troisième bouton radio activé les checkbox s'activent mais ne se désactivent plus si on sélectionne ensuite un des deux premier checkbox...

Voici mon code un peu modifié :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <script language="JavaScript" type="text/javascript"></script> </head> <body> <form method="post" action="formulaire.php?id=1#voir"> <input type="radio" name="choix" id="er"> <input type="radio" name="choix" id="er"> <input type="radio" name="choix" id="cb" onclick="javascript:changement()" onclick="javascript:changement()"> <input type="checkbox" id='coucou' disabled> <div class="submit"> <input type="submit" value="Envoyer" name="submit"> <input type="reset" value="Effacer" name="reset"> <input type="submit" value="Previsualisation" name="previsual"> </div> </form>

Essaies ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script language="JavaScript" type="text/javascript"><!--//
function changement()
{
   if (document.getElementById('cb').checked)
      document.getElementById('coucou').disabled=false;
   else
      document.getElementById('coucou').disabled=true;
}
//--></script>
</head>
 
<body>
 
<form method="post" action="formulaire.php?id=1#voir">
<input type="radio" name="choix" onclick="changement()"/>
<input type="radio" name="choix" onclick="changement()"/>
<input type="radio" name="choix" id="cb" onclick="changement()"/>
<input type="checkbox" id='coucou' disabled/>
 
<div class="submit">
<input type="submit" value="Envoyer" name="submit"/>
<input type="reset" value="Effacer" name="reset"/>
<input type="submit" value="Previsualisation" name="previsual"/>
</div>
</form>

06/09/2007, 19h41
12monkeys

Merci beaucoup, ça marche:king:

Oups, je suis allé un peu vite...

En fait l'exemple donné fonctionne correctement mais j'avais oublié de dire (et de tester aussi) qu'il doit y avoir 3 boutons checkbox :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <form method="post" action="formulaire.php?id=1#voir"> <input type="radio" name="choix" onclick="changement()"/> <input type="radio" name="choix" onclick="changement()"/> <input type="radio" name="choix" id="cb" onclick="changement()"/> <input type="checkbox" id='coucou' disabled/> <input type="checkbox" id='coucou' disabled/> <input type="checkbox" id='coucou' disabled/> <div class="submit"> <input type="submit" value="Envoyer" name="submit"/> <input type="reset" value="Effacer" name="reset"/> <input type="submit" value="Previsualisation" name="previsual"/> </div> </form>
Le problème avec ce script c'est que seul le premier checkbox s'active ou se désactive... Merci de votre aide...

07/09/2007, 09h50
JulienC

En HTML, l'attribut "id" est unique. Une valeur de id ne doit être utilisée qu'une seule fois pour toute la page (Or ici, tu utilises 3 fois l'id "coucou").

Remplace les id="coucou" par name="coucou", puis, au lieu de faire

Code:

document.getElementById('coucou').disabled=true;

fais une boucle for en utilisant getElementsByName('coucou'), qui renverra un tableau de 3 éléments (tes trois inputs nommés "coucou").
07/09/2007, 14h06
12monkeys

Désolé mais comme je disais je ne me suis pas encore plongé dans le javascript et je ne sais pas comment utiliser la boucle for (malgré la lecture du tutoriel sur l'introduction au javascript).

Faut il laisser le if else, mettre un for à la place ???

J'ai essayé de placer le for dans le if sans succès...

Désolé pour toutes ces questions :oops:

Ca doit ressembler à qq chose comme ca :

Code:

1
2
3
4
5
6
7
 
   if (document.getElementById('cb').checked)
   {
      var coucous = document.getElementsByName('coucou');
      for (var i=0 ; i<coucous.length ; i++)
         coucous[i].disabled=false;
   }

Il faudra faire de même avec "disabled=true" dans le "else"

07/09/2007, 16h38
12monkeys

Merci beaucoup ça marche, je ne m'en serais jamais sorti tout seul...