Checkbox, si une cochée, trois autres désactivées.

Version imprimable

Bonjour,

je suis débutant en java script, je souhaiterais que lorsque je coche une check box, les trois autres checkbox se désactivent. Et vis-versa, quand je décoche cette checkbox, les autres se réactivent.

J'ai développé le code suivant: mais rien y faire, cela ne marche pas :/

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>	 
<script type="text/javascript">
  function disabled(id) {
  if(document.form.getElementById(aucun).checked == true) {
      document.form.getElementById(maison).disabled = true;
	  document.form.getElementById(payement).disabled = true;
	  document.form.getElementById(étranger).disabled = true;
  }
}
 
</script>
</head>
<body>
<form name="test" method="post">
	<input type="checkbox" name="interet" value="etranger" id="étranger" onchange="disabled()"> etranger<br />
	<input type="checkbox" name="interet" value="maison" id="maison" onchange="disabled()"/> maison<br />
	<input type="checkbox" name="interet" value="payement" id="payement" onchange="disabled()"/> payement<br />
	<input type="checkbox" name="interet" value="aucun" id="aucun" onchange="disabled()"/> aucun<br />
 
</form>
 
</body>
</html>

Je continue à chercher mais si quelqu'un peut éclairer ma lanterne, ce serait génial.

Merci d'avance,

R.

J'ai également essayer avec le code suivant. Même effet, je comprends pas vraiment ce qui se passe...

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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>	 
<script type="text/javascript">
  function disabled() {
  if(document.test.interet_4.checked == true) {
      document.test.interet_2.disabled = true;
	  document.test.interet_3.disabled = true;
	  document.test.interet_1.disabled = true;
  }
}
 
</script>
</head>
<body>
<form name="test" method="post">
	<input type="checkbox" name="interet_1" value="etranger" id="étranger" onchange="disabled()"> etranger<br />
	<input type="checkbox" name="interet_2" value="maison" id="maison" onchange="disabled()"/> maison<br />
	<input type="checkbox" name="interet_3" value="payement" id="payement" onchange="disabled()"/> payement<br />
	<input type="checkbox" name="interet_4" value="aucun" id="aucun" onchange="disabled()"/> aucun<br />
 
</form>
 
</body>
</html>

22/12/2010, 23h13
RomainVALERI

Bienvenue a toi :)

C'est un problème maintes fois évoqué ici, je m'étonne qu'une recherche sur le forum ne t'en ait pas convaincu (hmm... quelle recherche ? :roll:)

Tu rencontres des difficultés ici parce que tu nages contre le courant : le comportement que tu recherches existe, c'est celui des boutons "radio". Ils se désactivent tous dès que l'un d'entre eux devient sélectionné, donc ça permet de ne sélectionner toujours qu'un seul (ni plus ni moins) élément.

Vouloir reconstruire ce comportement avec des checkboxes pose plusieurs problèmes à mon sens :

- tu transpires pour rien : cette fonctionnalité est "prête à l'emploi"
- c'est fastidieux, ça va poser des problèmes à écrire, débugger, puis rendre tes aménagements compatibles sur les différents navigateurs, etc.

>>> mais surtout :
- ça va troubler les utilisateurs au lieu de leur rendre service... 99% des checkboxes qu'ils voient depuis 20 ans se comportent comme des... checkboxes ^^ alors pourquoi les "tromper" ? (ils ne sont quand même pas *tous* si méchants... :aie: en concevant une interface, tu mettrais l'icone de fermeture d'une fenêtre dans le coin en bas à gauche, toi ? :roll:)

CONCLUSION : utilise donc des boutons radio et ton problème sera résolu ;)
22/12/2010, 23h23
Rockworld

Hello,

tout d'abord merci pour la réponse. J'aurais du préciser jusqu'au bout mon objectif. Qui était que si je sélectionne par après une des trois premières checkbox; je ne puisse plus cocher la quatrième et vis-versa. Donc je peux cocher les trois premières mais pas la quatrième ou la quatrième et pas les trois premières.

J'ai pas mal retourné le forum dans tous les sens, mais je reste bloqué sur la question. Abus de fatigue, peut-être debout depuis 5h30 du mat, ça n'aide pô...:oops:

OK, je comprends *mieux* ce que tu veux :roll: (je n'ai pas dit *bien* :aie:)

Quelques commentaires :
Code:

1 2 3 4 5 6 7 8 function disabled() {// drôle de nom mais admettons... if(document.test.interet_4.checked == true) { document.test.interet_2.disabled = true; document.test.interet_3.disabled = true; document.test.interet_1.disabled = true; }// après ce "if", plus rien ??? donc la fonction est censée n'avoir }// aucun effet sur les 3 premiers boutons on est d'accord ? // et il n'y a jamais moyen de les réactiver ?
A noter aussi : une syntaxe plus correcte pour accéder à tes input :
Code:

1 2 //document.test.interet_2.disabled = true; document.forms["test"].inputs["interet_2"].disabled = "disabled";
Mais bon puisqu'ils ont des id, je trouve que ca serait plus simple de les retrouver avec un getElementById, à condition de l'écrire correctement ;)

Citation:

document~~.form~~.getElementById("étranger")

Sinon : il ne suffit pas de les rendre "disabled" : on ne pourra plus interagir avec les checkboxes "disabled" mais celles qui étaient éventuellement cochées le resteront... c'est ce que tu attends comme comportement ?

Autre chose encore : pour réactiver une checkbox :

Code:

document.getElementById("maison").removeAttribute("disabled");

Je suis passé en JQuery...
Code:

1 2 3 4 5 6 7 8 9 10 function checkBoxOff() { if ($('#NONE_INTEREST').is(':checked')) { alert('test 1'); $('#FINANCIAL_INTEREST :input').attr('disabled', true); $('#INSURANCE_INTEREST :input').attr('disabled', true); $('#PAYEMENT_INTEREST :input').attr('disabled', true); alert('test 2'); } }
Alors, j'ai deux comportements différents sur IE: il m'affiche les messages "alert" m'empêche de cocher au premier clique mais ensuite je peux recocher mes checkbox. Sur firefox, il m'affiche les deux "alerts" mais aucun effet...

J'ai du mal à comprendre, désolé, je suis débutant.

Code:

1
2
3
4
5
6
7
8
function checkBoxOff() { 
 
while ($('#NONE_INTEREST').is(':checked')) { 
$('#FINANCIAL_INTEREST :input').attr('disabled', true); 
$('#INSURANCE_INTEREST :input').attr('disabled', true); 
$('#PAYEMENT_INTEREST :input').attr('disabled', true); 
} 
}

J'ai remplacé le if par un while. Mais là, mes browsers sont plantés.

23/12/2010, 13h47
RomainVALERI

Tu as déjà entendu parler d'un style de programmation appelé shotgun programming ? :calim2:

>>> Pose cet engin tout de suite. :aie: