Discussion :

[PoS77]

Bonjour a tous,

Je poste pour la premiere fois dans cette section et j'espere que je vais réussir a me faire comprendre

J'ai un formulaire avec plusieurs champs et je pause une question à un membre, s'il a son permis moto.
Si la personne l'a, il coche oui (bouton radio) les champs s'activent et il peu entrer la date d'obtention, sinon le champ est désactivé...

J'ai partiellement réussi a faire fonctionner mon script, mais je bute sur quelque chose

JS et Jquery ne sont pas mon fort et j'essaye d'avancer avec les tutos et démos que je trouve sur des sites.

Bref, ce qu'il se passe actuellement.

Lorsque je charge ma page, le champs son désactivé, aucune réponse a ma question (oui -> value=1 / non-> value=0) n'est coché...

Si je clique sur non, les champs sont toujours désactivés. Si je clique sur Oui, ils s'activent, mais si je re-clique sur non, ils restent activés... il faudrait qu'ils se désactive a nouveau...

Voici mon code html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="champ_form">
		<div class="field_name"><label for="permis">Avez vous voter Permis A</label></div>
		<div class="field_input">
		<input class="" type="radio" name="permis" id="permis" value="1" /> Oui 
		<input class="" type="radio" name="permis" id="permis" value="0" /> Non
	</div>
	<div id="info_permis"> <!-- toutes les balises dans cette div peuvent etre désactivés -->
		<div class="champ_form">
			<div class="field_name"><label for="date_permis">Date d'obtention</label></div>
			<div class="field_input"><input class="flatinput" type="text" name="date_permis" id="date_permis" size="10" maxlength="10" value="" /> (JJ/MM/AAAA)</div>
		</div>
	</div>

et voici le code JS et jquery.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
//code pour desactiver les champs suivant la valeur dun champ radio
	var permis = $("#permis");
	// permis topics est optionel
	var inital = permis.is(":checked");
	var topics = $("#info_permis")[inital ? "removeClass" : "addClass"]("gray");
	var topicInputs = topics.find("input").attr("disabled", !inital);
	// afficher si permi = 1
	permis.click(function() {
		topics[this.checked ? "removeClass" : "addClass"]("gray");
		topicInputs.attr("disabled", !this.checked);
	});

Voila je bute un peu sur ça.
Merci d'avance pour votre aide

[SpaceFrog]

un id DOIT être unique sur une page

[PoS77]

merci, donc ca c'est corrigé

J'ai donc un permis_oui et un permis_non dans mes input radio, mais ca ne change rien au problème

[SpaceFrog]

du coup faut mous remontrer le code ...

parce que ça :

Code :

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

	var permis = $("#permis");

ne retourne qu'un seul element

[PoS77]

Yatahhh !

bon j'ai réussi en faisant une usine a gaz, en changeant des trucs par ci par là...

et surtour en réfléchissant...

bref voici le code JS

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
//code pour desactiver les champs suivant la valeur dun champ radio
	var permis_oui = $("#permis_oui");
	var permis_non = $("#permis_non");
 
	// permis topics est optionel
	var inital_non = permis_non.is(":checked");
	var topics_non = $("#info_permis")[!inital_non ? "removeClass" : "addClass"]("gray");
	var inital_oui = permis_oui.is(":checked");
	var topics_oui = $("#info_permis")[inital_oui ? "removeClass" : "addClass"]("gray");	
 
	var topicInputs_oui = topics_oui.find("input").attr("disabled", !inital_oui);
	var topicInputs_non = topics_non.find("input").attr("disabled", !inital_non);
	// afficher si permi = 1
	permis_oui.click(function() {
		topics_oui[this.checked ? "removeClass" : "addClass"]("gray");
		topicInputs_oui.attr("disabled", !this.checked);
	});
	permis_non.click(function() {
		topics_non[!this.checked ? "removeClass" : "addClass"]("gray");
		topicInputs_non.attr("disabled", this.checked);
	});

et le html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	<div class="champ_form">
		<div class="field_name"><label for="permis">Avez vous voter Permis A</label></div>
		<div class="field_input">
		<input class="" type="radio" name="permis" id="permis_oui" value="1" /> Oui 
		<input class="" type="radio" name="permis" id="permis_non" value="0" /> Non
	</div>
 
	<div id="info_permis">
		<div class="champ_form">
			<div class="field_name"><label for="date_permis">Date d'obtention</label></div>
			<div class="field_input"><input class="flatinput" type="text" name="date_permis"  id="liste_1" size="10" maxlength="10" value="" /> (JJ/MM/AAAA)</div>
		</div>
		</div>
	</div>

[SpaceFrog]

Code :

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

et surtout en réfléchissant...

c'est pour ça que j'aime js

[PoS77]

oui c'est pas mal, c'est la premiere fois que j'en fait

Sinon pour revenir a ces radio, je pense qu'on peut optimiser le code, mais là je ne pourrais pas trouver tous seul vu comment j'ai trouvé en me disant:

tiens, et si je testais ca, en doublant le code, un pour le oui et un pour le non
et bingo ca a marché du premier coup