UI Button, checkbox à décocher

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

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.

UI Button, checkbox à décocher

jQuery

Vue hybride

Discussions similaires

Partager

Partager