Bouton radio activant/desactivant checkbox - adaptation de la FAQ

**12monkeys** · 06/09/2007, 13h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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"><!--//
function changement()
{
   if (document.getElementById('er').checked)
      document.getElementById('coucou').disabled=true;
   else
      document.getElementById('coucou').disabled=false;
 
   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" 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>

**JulienC** · 06/09/2007, 16h50

Essaies ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**12monkeys** · 06/09/2007, 19h41

Merci beaucoup, ça marche

**12monkeys** · 06/09/2007, 21h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**JulienC** · 07/09/2007, 09h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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").

**12monkeys** · 07/09/2007, 14h06

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

**JulienC** · 07/09/2007, 14h57

Ca doit ressembler à qq chose comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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"

**12monkeys** · 07/09/2007, 16h38

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

Bouton radio activant/desactivant checkbox - adaptation de la FAQ

JavaScript

Discussions similaires

Partager

Partager