Discussion :

[Devilju69]

Bonjour à tous,

Je souhaite bloquer au nombre de 3 maximum les cases à cocher. Mais j'ai des cases qui sont déjà "disabled".

Lorsque j'utilise ma fonction, cela me bloque bien mes cases disabled mais quand je coche une cache autorisée, la disabled redevient possible.

Pourquoi ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
jQuery(function(){
	var max = <?php echo $nbre_reserv; ?>;
	var checkboxes = $('input[type="checkbox"]');
	if(max>=0){
		checkboxes.change(function(){
			var current = checkboxes.filter(':checked').length;
			checkboxes.filter(':not(:checked)').prop('disabled', current > max);
		});
	}
	else{
		$(document).ready(function() {
			$("input[class='check_limit']").attr("disabled", "disabled");
		})
	}
});

[danielhagnoul]

Bonsoir

Sous réserve d'avoir bien compris la question.

Vous ne pouvez pas agir directement sur l'événement "change", car il est appelé chaque fois que l'utilisateur modifie son choix. Il doit s'agir d'une fonction qui est appelée pour des conditions particulières.

À la limite, elle peut être appelée chaque fois que l'utilisateur fait un nouveau choix, mais pas lorsqu'il change d'avis. Exemple :

Code CSS :

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

label { display: block; }

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
<label>
    Choix 1 : 
    <input type="checkbox" value="10">
</label>
<label>
    Choix 2 : 
    <input type="checkbox" value="20">
</label>
<label>
    Choix 3 : 
    <input type="checkbox" value="30" disabled>
</label>
<label>
    Choix 4 : 
    <input type="checkbox" value="40">
</label>
<label>
    Choix 5 : 
    <input type="checkbox" value="50" disabled>
</label>
<label>
    Choix 6 : 
    <input type="checkbox" value="60">
</label>
<label>
    Choix 7 : 
    <input type="checkbox" value="70">
</label>
<label>
    Choix 8 : 
    <input type="checkbox" value="80">
</label>
<label>
    Choix 9 : 
    <input type="checkbox" value="90">
</label>
<label>
    Choix 10 : 
    <input type="checkbox" value="100" disabled>
</label>

Code JavaScript :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var jObjBox = $( 'input[type="checkbox"]' );
 
    function disableCheckbox( number ){
        var n = number || 3;
 
        if ( n < 0 ) {
            n = 1;
        }
 
        if ( n > 3 ) {
            n = 3;
        }
 
        /*
         * On garde uniquement les éléments non
         * disabled et non checked.
         */ 
        var jObj = jObjBox.filter( function( i, item ){
                return ( ! $( item ).prop( "checked" ) && ! $( item ).prop( "disabled" ) );
            }),
            jObjLength = jObj.length;
 
        if ( n > jObjLength ) {
            n = jObjLength;
        }
 
        /*
         * On passe les n premiers objet jquery
         * inclus dans jObj en disabled.
         */ 
        for ( var i = 0; i < n; i++ ){
            jObj.eq( i ).prop( "disabled", true );
        }
    }
 
    jObjBox.on( "change", function(){
 
        /*
         * On agit uniquement lorsque l'utilisateur
         * sélectionne un choix.
         */ 
        if ( $( this ).prop( "checked" ) ) {
            disableCheckbox( 1 );
        }
    });
});

[Bovino]

Pourquoi ?

Parce qu'à aucun moment dans ton code tu n'indiques que les cases désactivées doivent le rester !

Code :

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

checkboxes.filter(':not(:checked)').prop('disabled', current > max);

Du coup, ce code traite indifféremment toutes les cases, y compris celles désactivées.
Enfin, je dis ça sous réserve aussi d'avoir bien compris ta demande qui est loin d'être claire...

Sinon, il y a quelques maladresses dans ton code.

Code :

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

$("input[class='check_limit']")

avec jQuery, la méthode la plus efficace pour cibler des éléments par leur classe, c'est d'utiliser la syntaxe CSS pour les classes

Code :

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

1
2
3
$(".check_limit")
// A la rigueur
$("input.check_limit")

Code :

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

1
2
3
4
5
else{
    $(document).ready(function() {
        $("input[class='check_limit']").attr("disabled", "disabled");
    })
}

L'utilité d'un $(document).ready dans un code intégré dans jQuery(function(){...}) (qui est un alias du précédent et fait donc la même chose) est loin d'être flagrante.

[Devilju69]

Comment on indique que les cases désactivées doivent le rester Bovino ?

Cela ne marche pas

Code :

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

checkboxes.filter(':not(:checked), :not(:disabled)').prop('disabled', current > max);

[Bovino]

C'est normal que ça marche pas... la syntaxe des sélecteurs jQuery s'inspire de la syntaxe CSS, c'est-à-dire que la virgule correspond à un OU, du coup, ton sélecteur n'apporte pas grand chose.

[Devilju69]

Alors comment faire ?

[Bovino]

Avant de pouvoir t'indiquer comment faire, il faut déjà comprendre ce que tu veux faire et là, c'est pas clair du tout.
Parce que déjà, si les cases désactivées doivent le rester, c'est quoi le mécanisme pour déterminer celles qui doivent être réactivées ?
Comment tu décides quelles cases sont potentiellement réactivables ?

[Devilju69]

Je défini à la base les cases désactivées. Je les désactive dès le début du chargement de la page.

[Bovino]

Ben non, ou alors ton script ne sert à rien !
Si les cases désactivées sont définies dès le départ, alors de fait, celles activées le sont aussi et donc aucune case ne peut être activée ni désactivée.
Donc toi, ton script sert à définir si des cases doivent être activées ou désactivées. Mais on ne sait pas selon quel critère une case désactivée peut être éligible à être réactivée.