11
votes

Catégories de jQuery

J'essaie d'écrire un morceau de code JQuery où, si toutes les cases à cocher sont "non cochées", toutes les balises LI ont la classe "désactivée".

mais, si une case à cocher (une case à cocher) est cochée, toutes les balises [Li] perdent la classe "désactivée".

Merci beaucoup!


3 commentaires

Voulez-vous supprimer la classe 'désactivée' si au moins une case à cocher est checkd ou une seule case à cocher est cochée?


Je le veux si au moins une case à cocher est cochée.


Merci Rayell, votre code a aidé énormément!


4 Réponses :


15
votes
$(':checkbox').click(function () {
    $('li').toggleClass('disabled', !$(':checkbox:checked').length);
});

18 commentaires

Vous devriez utiliser $ ('# MyPorm entrée [TYPE = Cochez la case]: cochée') Si vous voulez seulement les cases à cocher sous un formulaire avec ID MyPorm.


Je pense que vous vouliez dire $ ("LI") au lieu de $ ("*").


Oui, je remarque que la faute de frappe et la corrigée.


Vous pouvez simplement utiliser si ($ (TYPE = Cochez la case]: cochée '). Longueur) plutôt que d'utiliser le nombre supplémentaire variable.


Je crois que vous voudrez également changer d'autre si (comptez === 1) à autre si (compte> = 1). Sinon, si plus d'une boîte est vérifiée, cela échouera. Sinon, très gentil.


Lisez la description du problème. Il est indiqué si une case à cocher est sélectionnée, alors elle devrait supprimer la classe non si au moins une. Aussi, j'utilise la variable compteur pour rendre le script plus rapidement.


Aberon, l'utilisateur n'a pas clarifié s'il souhaite supprimer la classe si au moins une case à cocher est cochée ou exactement une case à cocher est cochée.


Vous devez utiliser l'événement de clic au lieu de l'événement de changement.


Vous pouvez remplacer la branche avec un appel à toggleclass au lieu de deux appels différents (un à addclass et un à remodéclass): $ ('li'). Tobgleclass ("désactivé" (comptez === 0));


Il y a un raccourci pour obtenir des cases à cocher au lieu de vérifier l'attribut type: $ ('cocher: cocher: cochée')


@Philippe Leybaert> Peu importe si j'utilise le changement ou sur l'événement dans ce cas


Ken Browning> Je pourrais remplacer cela si nous supprimions la classe si au moins une est sélectionnée. Si nous avons un cas exactement 1 ou aucune n'est sélectionnée, j'ai bien peur que cela ne puisse pas être raccourcir.


Ken, merci d'avoir souligné la méthode Tobgleclass, très cool. :)


Je viens de mettre à jour le code. Il couvre maintenant les deux cas (supprimer la classe si une seule case à cocher est cochée et supprimez-la si au moins une est cochée)


changer ou cliquer fait une grande différence. L'avez-vous essayé dans IE et Firefox?


Oui, "changement" est cassé dans IE, "cliquer" serait préférable. De plus, vous devez éditer / supprimer le premier code coupé car il supprime la classe uniquement lorsque une seule case à cocher est cliquée et que l'utilisateur précisait qu'il souhaite supprimer la classe si au moins une case à cocher est cliquée.


La réponse supérieure ici est beaucoup plus propre et intuitive que tout ce est (': coché') business. :)


@Chiramisu: Ne fonctionne pas tout à fait, car le gestionnaire doit examiner toutes les cases à cocher, pas seulement celle cliquée.



1
votes
$(':checkbox')
    .click(
        function() 
        { 
            $('li').toggleClass('disabled', $(':checkbox :checked').length <= 0));
        }
     );
EDIT: Thanks Ken for pointing out toggleClass method.         

0 commentaires

5
votes

Une légère modification de Rayell's, qui inclura toutes les cases à cocher ajoutées de manière dynamique:

$(':checkbox').live('click', function () {
    $('li').toggleClass('disabled', !$(':checkbox:checked').length);
});


2 commentaires

"Changement" n'est pas un bon événement pour capturer des cases à cocher. Vous devez toujours utiliser "Cliquez sur" (qui est également tiré lorsqu'une case à cocher est sélectionnée à l'aide du clavier).


Excellent point, et un dont j'aurais dû se souvenir d'un code précédent. Ie ne traite pas "changement" sur les cases à cocher, pour commencer.



8
votes

Je suis tombé sur ce post par accident et je pensais ajouter ma valeur shilling: xxx


1 commentaires

Cela n'applique pas de classe ou n'examine pas toutes les autres cases à cocher, alors ne résout donc pas le problème de l'OP. Ajout d'un gestionnaire de clic sur les cases à cocher, puis voir si l'élément cliqué est coché est un peu la partie facile :(