UI Button, checkbox à décocher [Résolu]

baggie · 17/01/2011, 11h09

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 :

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

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 :

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

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

gwinyam · 17/01/2011, 11h27

Hop la magie de la manipulation du DOM :

Code :

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

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

danielhagnoul · 17/01/2011, 12h14

Citation:

Envoyé par gwinyam

Hop la magie de la manipulation du DOM :

Code :

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

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 javascript :

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

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é

baggie · 17/01/2011, 13h00

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 :

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

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

Mais idem, ça ne fonctionne pas.

danielhagnoul · 17/01/2011, 13h21

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 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
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>

baggie · 17/01/2011, 13h42

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 :

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

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.

danielhagnoul · 17/01/2011, 18h31

Bonsoir

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

Code javascript :

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

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.

baggie · 18/01/2011, 08h44

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 :

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

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 :

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

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 :

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

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 :

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

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

Si ça peut aider ...

danielhagnoul · 19/01/2011, 23h06

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 javascript :

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

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.

baggie · 20/01/2011, 08h10

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

17/01/2011, 13h00	#4
baggie Membre confirmé Inscription : octobre 2007 Messages : 676 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations forums : Inscription : octobre 2007 Messages : 676 Points : 225 Points : 225	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 : Sélectionner tout - Visualiser dans une fenêtre à part $("#format input[type=checkbox]").val('off'); Mais idem, ça ne fonctionne pas.
	00

20/01/2011, 08h10	#10
baggie Membre confirmé Inscription : octobre 2007 Messages : 676 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations forums : Inscription : octobre 2007 Messages : 676 Points : 225 Points : 225	Merci beaucoup pour cette réponse ! En effet ça fonctionne
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email