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 !

[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é ??