Désactiver les cases à cocher après le montant spécifié sont sélectionnées

Question

J'ai travaillé sur une page qui permettra l'entrée dans une certaine partie de mon site Web si l'utilisateur sélectionne 8 cases sur 25 dans la bonne séquence.

Voici ce que je travaille jusqu'à présent CLICK HERE TO SEE A LIVE VERSION

Ma question est, comment puis-je désactiver complètement le reste des cases à cocher après 8 ont été choisis, jusqu'à présent, je me sers javascript pour tenir le compte, et je un popup d'alerte les empêchant de sélectionner plus, mais je voudrais désactiver complètement le reste des cases si possible.

Answer 1

J'ai simplifié votre code et il est here .

et cela répondra à votre question,

//update checkCount 
    checkCount = $(':checked').length; 

    if (checkCount >= maxChecks) { 
     //alert('you may only choose up to ' + maxChecks + ' options'); 
     $(':checkbox[name=checkbox]').not(':checked').attr('disabled', true); 
    } else { 
     $(':checkbox[name=checkbox]:disabled').attr('disabled', false); 
    } 

Answer 2

Vous pouvez le faire en modifiant la méthode setChecks comme suit:

function setChecks(obj) { 
    if(obj.checked) { 

     checkCount = checkCount + 1; 

     //note: modify this selector to specify the actual table in question, 
     //of course. If this is not known beforehand (ie there are multiple 
     //tables of checkboxes), you can use 
     // $(this).closest('table').find('input:checkbox:not(:checked)') 
     //instead. 
     if(checkCount == 8) 
      $('table input:checkbox:not(:checked)').attr('disabled', 'disabled'); 

    } else { 

     if(checkCount == 8) 
      $('table input:checkbox:not(:checked)').removeAttr('disabled'); 

     checkCount = checkCount - 1; 
    } 
} 

Rien à voir avec la question à portée de main, mais nous espérons utile: Je sais que c'est un exemple jsFiddle et donc probablement pas une indication de votre code réel , mais vous devez envisager d'utiliser une mise en forme cohérente, en particulier en ce qui concerne l'indentation (et dans une moindre mesure l'espacement). En outre, il est bon de toujours utiliser des points-virgules lors de l'écriture de javascript, même s'ils sont parfois optionnels. Le code lisible est beaucoup plus facile à déboguer, étendre, et certainement plus facile à comprendre pour les autres. Une autre chose que vous pouvez faire pour simplifier votre code est d'utiliser des feuilles de style au lieu de spécifier la largeur et l'alignement dans chaque élément td et d'utiliser un javascript discret au lieu de l'événement onclick dans chaque case à cocher. Ceux-ci peuvent être tous remplacés par une simple déclaration de liaison jQuery dans votre événement document.ready:

$('table input:checkbox').click(setChecks); 

Cela nécessiterait la modification setChecks recevoir un paramètre d'événement à la place. (Edit) comme ceci:

function setChecks() { 
    if(this.checked) { 
     ... 
    } else { ... } 
} 

Vous n'avez pas besoin en fait le paramètre d'événement parce this fait référence à la cible de l'événement en cours, de sorte que vous pouvez simplement supprimer ce paramètre tout à fait.

Answer 3

où vous avez l'alerte en ce moment, ce bit de jQuery:

$('input[name=checkbox]:not(:checked)').attr('disabled','disabled');

Voir une fourchette de votre code avec ce travail: http://jsfiddle.net/fKwEQ/