Discussion :

[delma]

Hello tout le monde!

Et bien je cherche un moyen simple de pouvoir définir le nombre max de checkbox que l'on a le droit de cocher.

Exemple:

Indiquer vos deux principale qualités:

- beau
- fort
- petit
- grand
- blond

L'idée est que l'utilisateur puisse choisir entre ces 5 propositions, mais ne puisse en cocher que 2...

La valeur du nombre possible de réponse est stocker dans ma bd ainsi qu'une autre information qui défini si l'utilsateur doit répondre - au moins, juste ou plus que - 2 réponse.

Suis-je obliger de passer par du javascript?
Est-ce que quelqu'un a une solution à proposer pour répondre à ce problème please!

Merci d'avance!

[mussara]

salut

moi je ne vois de solution qu'au niveau js:
tu fais une boucle sur les 5
tu testes si les checbox sont cochées
et ton nb total de cochées est inf ou égal à 2 alors c'est ok sinon il te redonne la main pour n'en choisir que 2

j'ai un script:

Code :

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

1
2
3
4
5
6
7
8
	for (i=0; i<=4; i++) {
		if ((document.getElementById("genre"+stritem[i]).checked) == false) {  // tant que les cases ne sont pas cochées, on continue
//			alert("non");
		}
		else { 
//			alert("oui");
//		alert(stritem[i]);
		}

qui ne fait pas la même chose, mais dont le principe est très proche...
@ toi de l'adapter
@+

[Sancho_54]

Ton test sur les cases à cocher veux tu le faire après avoir validé les choix ou le test a lieu a chaque fois que tu coche un case c'est-à-dire que lorsque l'utilisateur coche une troisieme case il est prévenu qu'il ne peut pas?

[delma]

Ton test sur les cases à cocher veux tu le faire après avoir validé les choix ou le test a lieu a chaque fois que tu coche un case c'est-à-dire que lorsque l'utilisateur coche une troisieme case il est prévenu qu'il ne peut pas?

Je préfère le faire le plus vite possible, donc quand le client coche la 3 eme case... Donc si je comprends bien le seul moyen c'est JS?

Et moi qui n'en ai jamais fait...
bon ca doit pas être la mer à boire...

[Bisûnûrs]

Oui, Javascript est le seul moyen.

Tiens, voilà de quoi te satisfaire :

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function verifChk(id){
   nbchk = document.getElementById('divchk').getElementsByTagName('input').length;
   var i;
   var nbcochee = 0;
   for(i=1;i<=nbchk;i++){
      if(document.getElementById('chk'+i).checked==true){
         nbcochee++;
         if(nbcochee>2){
            alert('Vous ne pouvez pas en choisir plus de deux.');
            document.getElementById(id).checked = false;
         }
      }
   }
}

Code HTML :

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

1
2
3
4
5
<div id="divchk">
   1:<input type="checkbox" id="chk1" name="chk1" onclick="verifChk('chk1')" />
   2:<input type="checkbox" id="chk2" name="chk2" onclick="verifChk('chk2')" />
   3:<input type="checkbox" id="chk3" name="chk3" onclick="verifChk('chk3')" />
</div>

Mais tu as intérêt à établir des règles, parce qu'admettons je ne choisis que deux cases : petit et grand ...

Ou alors utilise des boutons radio.

[delma]

Oui, Javascript est le seul moyen.

Tiens, voilà de quoi te satisfaire :

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function verifChk(id){
   nbchk = document.getElementById('divchk').getElementsByTagName('input').length;
   var i;
   var nbcochee = 0;
   for(i=1;i<=nbchk;i++){
      if(document.getElementById('chk'+i).checked==true){
         nbcochee++;
         if(nbcochee>2){
            alert('Vous ne pouvez pas en choisir plus de deux.');
            document.getElementById(id).checked = false;
         }
      }
   }
}

Code HTML :

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

1
2
3
4
5
<div id="divchk">
   1:<input type="checkbox" id="chk1" name="chk1" onclick="verifChk('chk1')" />
   2:<input type="checkbox" id="chk2" name="chk2" onclick="verifChk('chk2')" />
   3:<input type="checkbox" id="chk3" name="chk3" onclick="verifChk('chk3')" />
</div>

Mais tu as intérêt à établir des règles, parce qu'admettons je ne choisis que deux cases : petit et grand ...

Ou alors utilise des boutons radio.

merci beaucoup, c'est fort gentil!!!

Par contre qu'entends tu par des règles, je vois poo ce que tu veux dire.

[Bisûnûrs]

Par contre qu'entends tu par des règles, je vois poo ce que tu veux dire.

Si petit est coché, impossible de cocher grand.
Si maigre est coché, impossible de cocher gros.

Etc ...

[delma]

Si petit est coché, impossible de cocher grand.
Si maigre est coché, impossible de cocher gros.

Etc ...

Ok, je vois ce que tu veux dire, mais la je n'est aucun moyen de controle. Et ce n'est pas réellement important en fait dans le cadre de ce que je fais.
Merci beaucoup de ton aide!!

[delma]

Yep, j'ai encore une petite question sur le code javascript...
En fait j'utilise des templates pour passer des variables et pour creer ma liste de checkbox.
Ce qui donne le code suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="./js/script_checkbox.js" type="text/javascript"></script>      
<table>
    <tr>
        <td>{$libelleQuestionFermee}</td>
    </tr>
    <div id="divchk">
    {section name="laListeModalite" loop=$listeModalite}
    <tr>
        <td><input type="checkbox" id="{$listeModalite[laListeModalite].nom_modalite}" name="{$listeModalite[laListeModalite].nom_modalite}" onclick="verifChk('{$listeModalite[laListeModalite].nom_modalite}')" />{$listeModalite[laListeModalite].nom_modalite}</td>
    </tr>
    {/section}
    </div>
</table>

Mais en faisant de la sorte, le code JS ne fonctionne pas. J'ai remarqué que la variable nbchk restée à zéro, mais je ne vois pas comment éviter ce problème...

Désolé, mais je suis vraiment pas encore formé sur JS...

[Bisûnûrs]

Yep, j'ai encore une petite question sur le code javascript...
En fait j'utilise des templates pour passer des variables et pour creer ma liste de checkbox.
Ce qui donne le code suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="./js/script_checkbox.js" type="text/javascript"></script>      
<table>
    <tr>
        <td>{$libelleQuestionFermee}</td>
    </tr>
    <div id="divchk">
    {section name="laListeModalite" loop=$listeModalite}
    <tr>
        <td><input type="checkbox" id="{$listeModalite[laListeModalite].nom_modalite}" name="{$listeModalite[laListeModalite].nom_modalite}" onclick="verifChk('{$listeModalite[laListeModalite].nom_modalite}')" />{$listeModalite[laListeModalite].nom_modalite}</td>
    </tr>
    {/section}
    </div>
</table>

Mais en faisant de la sorte, le code JS ne fonctionne pas. J'ai remarqué que la variable nbchk restée à zéro, mais je ne vois pas comment éviter ce problème...

Désolé, mais je suis vraiment pas encore formé sur JS...

C'est normal et ce n'est pas un problème Javascript, enfin si ce n'est que ce que je pense.

Tu inclus un div entre les balises tr pour avoir au final quelque chose du genre :

Code HTML :

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

1
2
3
4
5
6
7
<table>
    <div id="divchk">
    <tr>
        <td></td>
    </tr>
    </div>
</table>

C'est tout bonnement syntaxiquement faux.

Solution :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<table id="divchk">
    <tr>
        <td>{$libelleQuestionFermee}</td>
    </tr>
    {section name="laListeModalite" loop=$listeModalite}
    <tr>
        <td><input type="checkbox" id="{$listeModalite[laListeModalite].nom_modalite}" name="{$listeModalite[laListeModalite].nom_modalite}" onclick="verifChk('{$listeModalite[laListeModalite].nom_modalite}')" />{$listeModalite[laListeModalite].nom_modalite}</td>
    </tr>
    {/section}
</table>

N'oublie pas de regarder le code généré (Afficher la source) pour voir si les id dans tes inputs correspondent bien à la boucle Javascript.

Attention aussi, ça ne fonctionnera pas ou mal si tu as des inputs dans la première ligne de ton tableau.

[delma]

Merci, ca va déjà mieux, mais ca ne fonctionne toujours po...

Edit : je viens de trouver mon erreur!

Merci encore!!!