Discussion :

[moimp]

Bonjour à tous,

J'ai une cascade de sélecteurs dont le dernier élément (lignes 10 à 12) ne fonctionne pas.

Voici mon HTML

Code html :

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
<form method="post" class= "L" name="filterForm">
	<fieldset><legend>Critères de filtrage</legend>
		<input type="radio" name="radio" id="tous" value="tous" checked /><label for="tous">Tous</label><br/>
		<input type="radio" name="radio" id="filtre" value="filtre" /><label for="filtre">Sélection</label><br/>
		<ul>
			<li><input type="checkbox" name="criteres[1]" id="criteres[1]" disabled />
				<label for="criteres[1]">Attente du 1<sup>er</sup> accueil</label><br/></li>
			<li><input type="checkbox" name="criteres[2]" id="criteres[2]" disabled />
				<label for="criteres[2]">Attente affectation binôme</label><br/></li>
			<li><input type="checkbox" name="criteres[3]" id="criteres[3]" disabled />
				<label for="criteres[3]">Accompagnements en cours</label><br/></li>
			<li><input type="checkbox" name="criteres[4]" id="criteres[4]" disabled />
				<label for="criteres[4]">Accompagnements terminés</label><br/></li>
			<li><input type="checkbox" name="criteres[5]" id="criteres[5]" disabled />
				<label for="criteres[5]">Accompagnements anciens<sup>(1)</sup></label><br/></li>
		</ul>
		<p><input type="submit" name="filter" value="Filtrer" />
	</fieldset>
	<p>Créer un nouvel accompagné&nbsp;: <input type="submit" name="new" value="Nouveau" /></p>
</form>

et le CSS

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
form[name="filterForm"] {
	margin-bottom:5px;
}
form[name='filterForm'] ul {
	margin-top:2px;
}
form[name='filterForm'] li {
	list-style:none;
}
form[name='filterForm'] li input[disabled] label {
	color:#666;
}

[psychadelic]

Logique : <label> est enfant du LI, et il est au même niveau que le <input>

ton indentation est mauvaise, tu devrai utiliser un beautify pour mieux t'en rendre compte.

une solution :

Code :

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

1
2
3
form[name='filterForm'] li input[disabled] + label {
	color: #666;
}

[JefReb]

Question peut être stupide: Pourquoi mettre un <br/> dans cette liste à puce?

[Invité]

@JefReb est dans la place !
Non.

« N'est stupide que la stupidité. »
Forrest Gump

(Par contre, on peut te reprocher de ne PAS avoir CHERCHE à te renseigner AVANT de répondre...)

La bonne question est : "pourquoi mettre plusieurs fois id="filtre", alors qu'un id doit être UNIQUE ?"

Code html :

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

1
2
			<li><input type="checkbox" name="criteres[1]" id="criteres[1]" disabled />
				<label for="criteres[1]">Attente du 1<sup>er</sup> accueil</label><br/></li>

Certes, ici, le <br/> semble en trop.
Par contre, pour ton information, un <label> se rapporte à un <input> par la relation for / id (ce qui permet d'activer l'input en cliquant sur le label):

Code html :

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

1
2
<label for="xxxxx">
<input id="xxxxx" />

Et comme je viens de te le rappeler : un id doit être UNIQUE.

N.B. On aurait pu écrire :

Code html :

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

1
2
3
4
			<li>
				<input id="critere_tagadatsouintsouin_1" type="checkbox" name="criteres[1]" disabled />
				<label for="critere_tagadatsouintsouin_1">Attente du 1<sup>er</sup> accueil</label>
			</li>

Ou encore (car un label peut entourer un input.... mais ça peut poser problème quand on veut styler le label seul) :

Code html :

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

1
2
3
			<li>
				<label><input type="checkbox" name="criteres[1]" disabled /> Attente du 1<sup>er</sup> accueil</label>
			</li>

[moimp]

Mon problème semble être résolu avec la réponse de psychadelic qui m'a bien éclairé.

Pour vos autres réponses, il y a des choses que je ne comprends pas:
L'id "filtre" est bien unique. L'id "criteres[n]" est unique puisque la valeur entre crochets est elle-même unique mais peut-être que les crochets posent un problème?

Ou encore (car un label peut entourer un input.... mais ça peut poser problème quand on veut styler le label seul) :

C'est bien le cas ici où il s'agit d'appliquer un style au label en fonction de l'attribut disabled de l'input qui le précède.

J'attends vos éventuelles réactions avant de mettre le sujet comme 'résolu'.

P.S. Les <br/> n'ont effectivement rien à faire ici. J'ai oublié de les supprimer lorsque je les ai remplacé par la liste.

[Invité]

L'id "filtre" est bien unique.

Oui. La remarque s'adressait à JefReb, qui en a mis partout !

[moimp]

OK, merci. Je marque le sujet comme résolu.

[psychadelic]

Mon problème semble être résolu avec la réponse de psychadelic qui m'a bien éclairé.

Semble ??
C'est presque vexant, le sélecteur css de voisinage +, n'est pas une invention de ma part.

L'id "criteres[n]" est unique puisque la valeur entre crochets est elle-même unique mais peut-être que les crochets posent un problème?

ça doit passer ok sur un validateur html, mais perso je ne trouve pas cela très heureux, car il faut aussi penser à ne pas trop torture les cerveaux de ceux qui passeront derrière toi pour modifier ton code. Tu crée un ambiguïté syntaxique, ou peut être pire tu utilise ailleurs la valeur de ces names en javascript pour atteindre une variable au travers d' un eval ??

Alors même si ton code n'est pas forcément un usine à gaz, et que ce code est juste un brouillon amené à disparaître, évite ça.

J'ai fait pas mal de TMA dans ma vie, on utilise toujour des vieux programmes COBOL écrits dans les années 80 qui semblent avoir été écrits avec les pieds, mais qu'on est obligé de garder parce que les réécrire tous prendrait des années et que maintenant ils sont encapsulé dans des process Java pour pouvoir les adapter aux mainframes actuels, et je préféré même pas imaginer ce que tout ça va devenir par la suite.

L'autre intéret d'utiliser un beautify, c'est qu'il permet aussi d'avoir une uniformaisation dans l'écriture du code.
Est-ce que tu a au moins testé ??

[moimp]

Semble ??
C'est presque vexant, le sélecteur css de voisinage +, n'est pas une invention de ma part.

Ce n'était pas destiné à toi. Je voulais vérifier s'il n'y avait pas d'autres problèmes en fonction des autres réponses. De plus, ta remarque m'a permis de mieux comprendre l'utilisation du signe + en CSS.

ça doit passer ok sur un validateur html, mais perso je ne trouve pas cela très heureux, car il faut aussi penser à ne pas trop torture les cerveaux de ceux qui passeront derrière toi pour modifier ton code.

Ce type de noms - nom[n] - est utile pour le traitement du formulaire en php.

Tu crée un ambiguïté syntaxique, ou peut être pire tu utilise ailleurs la valeur de ces names en javascript pour atteindre une variable au travers d' un eval ??

Sans être encore très expérimenté en JavaScript, je suis bien arrivé à gérer ces noms avec querySelector ou querySelectorAll et je n'utilise pas d'eval.

L'autre intéret d'utiliser un beautify, c'est qu'il permet aussi d'avoir une uniformisation dans l'écriture du code.
Est-ce que tu a au moins testé ??

Je n'ai pas encore testé: Une chose après l'autre.

En tous cas merci pour ces remarques.

[Invité]

C'est la pleine lune, ou quoi ?

Autant les crochets se justifient pour les name="criteres[1]", autant pour les id, on préfèrera : id="criteres_1"

Code HTML :

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

1
2
3
4
5
 
			<li>
				<input id="criteres_1" type="checkbox" name="criteres[1]" disabled />
				<label for="criteres_1">Attente du 1<sup>er</sup> accueil</label>
			</li>

[JefReb]

@Jreaux62
Comme je l'avais mis dans mon poste, je ne suis pas fort dans les formulaires, je voulais juste participer et c'est le <br/> qui m'avait étonné.
Par contre pour id, OUI, c'est une grossière erreur que je ne fais jamais d'habitude et je devais avoir la tête ailleurs.
Je dirai même que je suis souvent étonné de voir autant d'utilisation d'id dans les posts alors qu'une classe devrait suffire.
Mais bon j'aurai dû m'abstenir de participer

[psychadelic]

si on met un id sur un élément html, c'est qu'en principe il est utile dans un traitement en JavaScript et pour en simplifier la lecture par la suite, sinon, oui, vaut mieux éviter de surcharger son code avec des trucs inutiles et redondants.
Et en cas de besoin pour y stocker de l'information, il vaut mieux utiliser l'attribut data, c'est 1000 moins ambigu.

[moimp]

Et en cas de besoin pour y stocker de l'information, il vaut mieux utiliser l'attribut data, c'est 1000 moins ambigu.

Je ne connaissais pas cet attribut. J'ai regardé son utilisation ici et c'est intéressant.
Merci aux gentils contributeurs pour toutes ces explications.