Désactiver des checkbox sous conditions

Version imprimable

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:

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"); }) } });

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:

label { display: block; }

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

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 );
        }
    });
});

26/11/2014, 08h10
Bovino
Citation:

Pourquoi ?

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

Code:

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:

$("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:

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

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.
26/11/2014, 09h43
Devilju69

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

Cela ne marche pas

Code:

checkboxes.filter(':not(:checked), :not(:disabled)').prop('disabled', current > max);
26/11/2014, 09h48
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. :aie:
26/11/2014, 10h33
Devilju69

Alors comment faire ?
26/11/2014, 10h38
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 ?
26/11/2014, 12h11
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.
26/11/2014, 13h54
Bovino

Ben non, ou alors ton script ne sert à rien ! :mrgreen:
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.