desactiver le reste des cases à cocher

desactiver le reste des cases à cocher - HTML/CSS - Programmation

Marsh Posté le 08-09-2009 à 23:38:55    

Salut,
Venons-en à l'essentiel. J'ai un formulaire avec 4 cases à cocher.
Je voudrais que lorsqu'on sélectionne 2 cases, les 2 autres soient désactivées (grisées).

 

Voici mon code

Code :
  1. <form name="casesacocher" id="casesacocher" action="">
  2. <input name="case"  type="checkbox"  onclick="coche();"/>
  3. <input name="case"  type="checkbox" onclick="coche();" />
  4. <input name="case" type="checkbox"  onclick="coche();" />
  5. <input name="case"  type="checkbox"  onclick="coche();" />
  6. <input type="button" name="valider" id="valider"  value="choisir" />
  7. </form>


Code :
  1. <script type="text/javascript">
  2. function coche(){
  3. var compteur=0;
  4. var liste = document.forms["casesacocher"].elements["case"];
  5. for (var i = 0; i < liste.length; i++) {
  6.  if (liste[i].checked){
  7.  compteur=compteur+1;
  8.  }
  9.   if (compteur==2){
  10.   alert("ok" );
  11.   compteur=0;
  12.   }
  13. }
  14. }
  15. </script>


une alert "ok" se produit quand on clique sur 2 cases mais bug :
- quand on clique sur plus de 2, l'alerte s'affiche quand même...
- mais ce problème peut-être résolu si à la 2ème coche, on désactive les autres cases.

 

Comment faire ?
Merci


Message édité par Ryoh le 08-09-2009 à 23:39:39
Reply

Marsh Posté le 08-09-2009 à 23:38:55   

Reply

Marsh Posté le 09-09-2009 à 11:12:55    

comment passer les cases à cocher en disabled ?

Reply

Marsh Posté le 09-09-2009 à 11:39:09    

tu rajoute l'attribut "disabled" et sa valeur "disabled"...

 

Soit :

 

<input name="case"  type="checkbox" disabled="disabled" onclick="coche();" />
enfin, en JS ça sera monInput.disabled = true;

 

n'oublie pas de mettre la valeur false à ce disabled si l'user décoche l'une des case...


Message édité par abais le 09-09-2009 à 12:45:18

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 09-09-2009 à 12:53:22    

je vois pas comment faire la suite en fait....

Reply

Marsh Posté le 09-09-2009 à 15:35:57    

2 choses tout d'abord:
 
- ton javascript ne me semble pas très portable, il risque de ne pas marcher sur tous navigateurs, il vaut mieux utiliser les méthodes getElementById ou getElementsByName par exemple.
- je suis pas sur que soit terrible d'appeler tout tes boutons pareil (name="case" )
 
sinon, tu dois pouvoir fonctionner ton truc avec qqchose du genre:

Code :
  1. function coche(){
  2.  var compteur=0;
  3.  var liste = document.forms["casesacocher"].elements["case"];
  4.  for (var i = 0; i < liste.length; i++) {
  5.    if (liste[i].checked){
  6.      compteur=compteur+1;
  7.    }
  8.    if (compteur==2){
  9.      alert("ok" );
  10.    }
  11.  }
  12.  
  13.  for (var i = 0; i < liste.length; i++) {
  14.    liste[i].disabled = false;
  15.    if ((compteur >= 2) && !liste[i].checked){
  16.      liste[i].disabled = true;
  17.    }
  18.  }
  19. }

Reply

Marsh Posté le 09-09-2009 à 20:53:36    

je te remercie, j'ignore qu'il fallait refaire une boucle...
en fait les cases seront générés dynamiquement, j'ai pas envie de passer par l'id en ajoutant 1 pour les différencier.

 

pour éviter de nommer toutes les cases name="case", je fais un

Code :
  1. document.getElementById("casesacocher" ).getElementsByTagName("input" );

 

il me désactive aussi le bouton, logique vu que c'est aussi un input...

 

edit: non c'est bon je fous un id au bouton et je le desactive pas.

 

merci à toi :jap:


Message édité par Ryoh le 09-09-2009 à 21:00:58
Reply

Marsh Posté le 11-09-2009 à 19:15:23    

pataluc a écrit :

2 choses tout d'abord:
 
- ton javascript ne me semble pas très portable, il risque de ne pas marcher sur tous navigateurs, il vaut mieux utiliser les méthodes getElementById ou getElementsByName par exemple.
- je suis pas sur que soit terrible d'appeler tout tes boutons pareil (name="case" )
 
sinon, tu dois pouvoir fonctionner ton truc avec qqchose du genre:

Code :
  1. function coche(){
  2.  var compteur=0;
  3.  var liste = document.forms["casesacocher"].elements["case"];
  4.  for (var i = 0; i < liste.length; i++) {
  5.    if (liste[i].checked){
  6.      compteur=compteur+1;
  7.    }
  8.    if (compteur==2){
  9.      alert("ok" );
  10.    }
  11.  }
  12.  
  13.  for (var i = 0; i < liste.length; i++) {
  14.    liste[i].disabled = false;
  15.    if ((compteur >= 2) && !liste[i].checked){
  16.      liste[i].disabled = true;
  17.    }
  18.  }
  19. }



 
 
Bonjour ,
 
je me suis basé sur ce code la pour mon formulaire pour autoriser que 6 case cocher .
 
je voudrais savoir si le javascript peut se basé sur autre chose que name pour case  name="case"
 
ici  :   var liste = document.forms["casesacocher"].elements["case"];
 
vu que name je me sert deja dans mon formulaire  pour afficher sa correspondance    
 
exemple :  
 
<img src="boule_loto/1.gif" />
<input type="checkbox" name="N°1" id="" value="champ_supp_1"  onclick="coche();"/>  
 
<img src="boule_loto/11.gif" alt="" />
<input type="checkbox" name="N°11" "  id="champ_supp_11" "value="1"  onclick="coche();"/>
 
<img src="boule_loto/21.gif" alt="" />
<input type="checkbox" name="N°21"  id="champ_supp_21" value="1"  onclick="coche();"/>
 
une fois le mail envoyer dans ma boite de reception  
 
je recois  :
 
N°1 : 1
 
N°11: 1
 
N°21: 1
 
 
 
j'ai essayé d'être le plus claire possible lol
 
merci d'avance
 
stomy
 
 
 

Reply

Marsh Posté le 11-09-2009 à 22:10:24    

oui c'est ce que j'ai fait
 
penses à rien, passes un bon week-end et je te file la solution lundi :o

Reply

Marsh Posté le 12-09-2009 à 10:47:52    

stomy95 a écrit :


 
 
Bonjour ,
 
je me suis basé sur ce code la pour mon formulaire pour autoriser que 6 case cocher .
 
je voudrais savoir si le javascript peut se basé sur autre chose que name pour case  name="case"
 
ici  :   var liste = document.forms["casesacocher"].elements["case"];
 
vu que name je me sert deja dans mon formulaire  pour afficher sa correspondance    
 
exemple :  
 
<img src="boule_loto/1.gif" />
<input type="checkbox" name="N°1" id="" value="champ_supp_1"  onclick="coche();"/>  
 
<img src="boule_loto/11.gif" alt="" />
<input type="checkbox" name="N°11" "  id="champ_supp_11" "value="1"  onclick="coche();"/>
 
<img src="boule_loto/21.gif" alt="" />
<input type="checkbox" name="N°21"  id="champ_supp_21" value="1"  onclick="coche();"/>
 
une fois le mail envoyer dans ma boite de reception  
 
je recois  :
 
N°1 : 1
 
N°11: 1
 
N°21: 1
 
 
 
j'ai essayé d'être le plus claire possible lol
 
merci d'avance
 
stomy
 
 
 


Ce n'est pas la bonne facon de procéder.
 
Admettons que tes numéros représentent une liste de numéros (ce qui est le cas)
chaque checkbox devra être écrite de cette maniere :  
<input type="checkbox" name="numeros[]" value="1" />
<input type="checkbox" name="numeros[]" value="2" />
<input type="checkbox" name="numeros[]" value="3" />
 
Et au niveau PHP tu récupèreras un tableau de numéros, c'est beaucoup plus propre à traiter que de ce faire chier avec des variables nommées n°1, n°12, n°23 avec comme valeur 1


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed