UI Button Toggle, change l'image d'un bouton [Résolu]

[Mailgifson]

Bonjour à tous,

J'utilise JQuery et JQuery UI pour l'affichage.

J'aimerais mettre des boutons qui reste enfoncés (bouton ON/OFF), du genre le bouton "Toggle" :

http://jqueryui.com/demos/button/#checkbox

Mon problème est que dans l'exemple fournit, ils utilisent des "id" pour chaque bouton. Dans mon cas, j'ai un nombre de bouton non défini (un bouton par ligne dans un tableau généré par une Servlet).

Je ne parviens pas à adapter ce code, sans utiliser les "id". Est-ce que cela est possible ?

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
27
28
29
30
31
 
<meta charset="utf-8">
 
	<script>
	$(function() {
		$( "#check" ).button();
		$( "#format" ).buttonset();
	});
	</script>
	<style>
	#format { margin-top: 2em; }
	</style>
 
 
 
<div class="demo">
 
<input type="checkbox" id="check" /><label for="check">Toggle</label>
 
<div id="format">
	<input type="checkbox" id="check1" /><label for="check1">B</label>
	<input type="checkbox" id="check2" /><label for="check2">I</label>
	<input type="checkbox" id="check3" /><label for="check3">U</label>
</div>
 
</div><!-- End demo -->
 
<div class="demo-description">
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
</div><!-- End demo-description -->

Merci.

[danielhagnoul]

Bonsoir

L'attribut for du label attend un ID et un ID doit être unique, reste donc la génération automatique d'ID unique, par exemple "btnToggle" + n avec n allant de 0 à m.

Code :

1
2
3
4
<input type="checkbox" id="btnToggle0" /><label for="btnToggle0">Toggle</label>
<input type="checkbox" id="btnToggle1" /><label for="btnToggle1">Toggle</label>
<input type="checkbox" id="btnToggle2" /><label for="btnToggle2">Toggle</label>
<input type="checkbox" id="btnToggle1" /><label for="btnToggle3">Toggle</label>

$("[id^='btnToggle']").button();.

[Mailgifson]

Oki, je vais essayer cela.

Merci.

[Mailgifson]

Ca fonctionne
Merci !