UI Button, checkbox à décocher

Version imprimable

Bonjour,

j'utilise UI Button pour créer deux checkbox dans un formulaire.

Quand je soumets le formulaire, je vide mes champs et j'aimerai décocher toutes mes checkbox.
Code:

1 2 3 4 5 <div id="format"> <input type="checkbox" id="chef" /><label for="chef">Chef</label> <input type="checkbox" id="secretaires" /><label for="secretaires">Secrétaires</label> </div>
Et mon ajax qui traite le formulaire :
Code:

1 2 3 4 5 6 7 8 9 10 11 $.ajax({ type: 'GET', url: 'mapage.php?', success: function(html) { // On vide les champs $("#message").val(''); $("#sujet").val(''); // ICI ON DECOCHE LES CHECKBOX } });
J'ai testé avec attr('disabled',true), avec checked, j'ai regardé dans la doc sur UI Button mais je n'ai rien trouvé de concluant.

Si vous avez la solution ...
Merci :D

Hop la magie de la manipulation du DOM :
Code:

1 2 $("#chef").removeAttr("checked"); $("#secretaires").removeAttr("checked");

Citation:
Envoyé par gwinyam
Hop la magie de la manipulation du DOM :
Code:

1 2 $("#chef").removeAttr("checked"); $("#secretaires").removeAttr("checked");
Bonjour

Il y a souvent plusieurs manières d'arriver au but, mais si les "checkbox" doivent être manipulés plusieurs fois je préfère écrire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 // pour traité tous les inputs chekbox de la division d'id format $("#format input:checkbox").attr("checked", ""); // décoché // $("#format input:checkbox").attr("checked", "checked"); // coché // pour un traitement individuel $("#chef").attr("checked", ""); // décoché // $("#chef").attr("checked", "checked"); // coché

17/01/2011, 14h00
baggie

Merci pour vos réponses.

Cependant, je les avais déjà testées, et rien ne fonctionne.

Mes checkbox sont réalisées avec UI Button et apparemment ça diffère par rapport à des checkbox "normales".

Par exemple, quand je veux la valeur de ma checkbox, j'obtiens 'on' ou 'off' si elle est cochée ou non. Sauf que même avec ça, je n'arrive pas à décocher.

J'ai testé :

Code:

$("#format input[type=checkbox]").val('off');

Mais idem, ça ne fonctionne pas.

:oops:

En fait il s'agit du widget UI Button et de la gestion des inputs checkbox par le label, il prend la classe ui-state-active lorsqu'il est coché.

Si on reprend l'exemple :

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
41
42
43
44
45
46
47
48
49
50
51
52
 
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.7.custom.css">	
	<style>
                body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
                font-weight:normal; line-height:normal; letter-spacing:normal; }
                h1,h2,h3,h4,h5 { font-family:serif; }
                div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
                h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
                p { padding:6px; }
                div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
                color:#000000; border:1px solid #666666; }
                
                /* Test */
                #format { margin-top: 2em; }
        </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<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>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.7.custom.min.js"></script>
	<script>
                $(function(){
                        
$( "#check" ).button();
$( "#format" ).buttonset();
 
$("label[for='check2']").addClass("ui-state-active");
 
// $("label[for='check2']").removeClass("ui-state-active");
 
                });
        </script>
</body>  
</html>

17/01/2011, 14h42
baggie
Merci pour cette réponse, j'ai bien testé cette solution, seul problème, même si mon button checkbox n'a plus la classe "ui-state-active", il est toujours détecté comme coché (j'ai un test qui m'avertit si aucune checkbox est cochée).

J'explique :
- on envoie le formulaire.
- Si aucune checkbox cochée, on a un alert();
- On coche (donc on a la classe ui-state-active et aria-pressed=true)
- Ca envoie le formulaire.
- Champs vidés, checkbox décochées (en visible oui mais c'est tout, pas en pratique)
- Maintenant je veux à nouveau envoyer le form avec de nouvelles données.
- J'oublie de rappuyer sur un button checkbox.
- Aucun signalement comme quoi j'ai oublié de saisir quelque chose, alors que je n'ai plus la classe ui-state-active et que aria-pressed = false.
Code:

1 2 3 $("label[for='chef']").removeClass("ui-state-active"); $("label[for='chef']").attr("aria-pressed",true);
J'ai essayé plusieurs choses mais vraiment rien à faire.
17/01/2011, 19h31
danielhagnoul
Bonsoir

Je crois que pour le widget UI Button, ce code :
Code:

1 2 3 $("label[for='check2']").addClass("ui-state-active"); // $("label[for='check2']").removeClass("ui-state-active");
est la bonne solution. Il fonctionne pour le code en exemple.

Il faudrait pouvoir examiner votre code et particulièrement celui du test. Au minimum un lien vers la page web.

Bonjour,

je ne peux pas mettre de page en ligne donc ça risque d'être plus compliqué :?

Voici mon code exact, quand le bouton n'est pas coché :
Code:

1 2 3 <input type="checkbox" id="chef" class="ui-helper-hidden-accessible"> <label for="chef" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Chef d'antenne</span></label>
Et quand on clique dessus :
Code:

1 2 3 4 <input type="checkbox" id="chef" class="ui-helper-hidden-accessible"> <label for="chef" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-active" role="button" aria-disabled="false"> <span class="ui-button-text">Chef d'antenne</span></label>
Donc j'ai fait ceci pour décocher ma checkbox :
Code:

1 2 3 $("label[for='chef']").removeClass("ui-state-active"); $("label[for='chef']").attr("aria-pressed",false);
Quand j'envoie le formulaire, tout se passe bien comme il faut, je repars dans la configuration de départ (le premier code).
Mais si je réenvoie à nouveau mon formulaire, il ne détectera pas qu'aucune checkbox est cochée.

Alors peut-être est-ce mon test qui est mal écrit ? (test qui fonctionne à la première ouverture de la page)
Code:

1 2 3 4 5 if($("#format input:checkbox:checked").size() == 0) { alert('Merci de choisir au moins un destinataire !'); }
Si ça peut aider ... :calim2:

Bonsoir

J'ai examiné vos extraits de code et j'ai réalisé quelques tests, la solution avec ":checked" a un comportement bizarre et je lui préfère le code suivant :
Code:

1 2 3 4 5 6 7 8 9 $("#chef").button(); if (!$("label[for='chef']").hasClass("ui-state-active")){ alert("UI Button id chef n'est pas checked"); } else { $("label[for='chef']").removeClass("ui-state-active").attr("aria-pressed", false); alert("UI Button id chef n'est plus checked"); }
La gestion de cache de Firefox peut également poser problème, mais même avec lui le code ci-dessus semble fonctionnel.

20/01/2011, 09h10
baggie

Merci beaucoup pour cette réponse ! En effet ça fonctionne :ccool: