UI Button, comment puis-je cocher une checkbox ?

Version imprimable

Bonjour,

[Edit 2010-10-16 01:25 par danielhagnoul] Widget UI Button
---------------------------

Je découvre JQuery et JQuery UI. Dans ce dernier, je souhaite dans mon script cocher une checkbox.
Code:

1 2 3 4 function Check() { $('#check1').button("option","checked", true); }
Là, ma chexkbox est bien considéré comme coché. Mais le skin ne change pas. La classe ui-state-active qui devrais être:
Code:

1 2 3 4 5 <input type="checkbox" id="check1" class="ui-helper-hidden-accessible"/> <label for="check1" aria-pressed="false" class="ICI ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-hover" role="button" aria-disabled="false"> <span class="ui-button-text">B</span> </label>
N'est pas appliqué. je lutte depuis plusieurs heures sur ce pb, quelqu'un a t'il était dans la même impasse?

Je pense qu'il faut faire un $('#check1').addclass("ui-state-active") mais il ne l'applique pas au label. Comment lui dire que c'est au label sachant que je n'ai pas d'ID avec.

14/10/2010, 21h05
Arnaud F.

Bonjour,

Pourquoi passer par button pour changer la propriété de ce qui est censé être une checkbox?
15/10/2010, 10h56
Oribiahn

Ben, c'est à cause de JQuery UI

Documentation ici

Le truc me plait bien, mais j'avoue ne pas bien comprendre leur doc, je dois rater un petit quelques chose qui m'empêche par programmation de cocher des cases.

Bonsoir

Code:

1
2
3
// même avec le widget button, checked est toujours un attribut
$("#check1").attr("checked","checked"); // pour sélectionner
// $("#check1").attr("checked",""); // pour déselectionner

18/10/2010, 08h26
Oribiahn

Merci danielhagnoul, mais j'avais déjà essayé cette syntaxe.

Ce n'est pas probant. En gros la valeur du checker devient true mais il ne prend pas le skin d'un bouton enfoncé.

La classe ui-state-active n'est toujours pas là où elle devrait être.
18/10/2010, 11h19
danielhagnoul

Bonjour

Comme il s'agissait de ma première question sur le widget button 1.8.5, j'avais bien entendu testé avant de donner la réponse et le bouton changeait d'état. Vous n'auriez pas oublié d'inclure les styles UI ?

Normalement le soucis ne vient pas de là, en effet quant je clique manuellement sur une des checkbox elle prend le design d'un bouton enfoncé comme souhaité.
Comme je le dis dans le message de tête, c'est la classe ui-state-active qui est manquante sur le label. La fonction officielle

Code:

$("#check1").attr("checked","checked");

ne semble pas la rajouter.

En fait, j'ai repris l'exemple du site

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
32
33
34
35
36
37
38
39
40
<?php
    $this->placeholder("Titre")->set("Documentation et Spécifications des Omicrons");
?>
 
<meta charset="utf-8">
	<script>
	$(function() {
		$( "#check" ).button();
		$( "#format" ).buttonset();
	});
 
        function Check()
        {
            alert(1);
            $("#check2").attr("checked","checked");
        }
 
	</script>
	<style>
	#format { margin-top: 2em; }
	</style>
 
<div class="demo">
 
<input type="checkbox" id="check" onclick="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 -->

et mon "I" n'est pas enfoncé.

11/12/2010, 15h56
spy74

je rencontre le même problème es que quelqu'un a trouvé une autre solution que de modifier manuellement tout les attributs bouton en incluant manuellement les classes css ?

Salut à tous,

Il y a cette solution :

Code:

1
2
3
4
5
6
7
/* Initialisation du groupe de checkbox */
$("#radiobar").buttonset();
$('#radio1').bind('click', function() { $(this).attr('checked', true).trigger('change'); fntPerso(); } );
$('#radio2').bind('click', function() { $(this).attr('checked', true).trigger('change'); fntPerso(); } );

/* Activation d'un bouton au chargement de la page */
$("#radio2").trigger('click');

Enjoy :P

15/12/2010, 21h28
spy74

merci pour l'info :)
02/02/2011, 14h28
Morphinof

Solution
Comme dit dans la doc il faut utiliser button('refresh') après une modification sur les boutons, il faudra donc :
Code:

1 2 3 $('#mon-boutton-radio-1').attr('checked', true); puis $('#mon-boutton-radio-1').button('refresh');
et la ça marche.