jQuery Girl
  1. jQuery Girl
  3. Limiter le nombre de cases à cocher cochées
Intereting Posts
Les éléments svg jQuery ajoutés ne s’affichent pas l’utilisation de la valeur IEnumerable pour les résultats d’auto-complétion est toujours nulle Changer INPUT avec SELECT Sérialiser un formulaire complexe en object JSON à l’aide de jQuery TinyMCE 4 ne peut pas saisir les champs de texte du plugin fournis Comment obtenir la valeur optimale de décalage correcte de webkit (Chrome / Safari) avec jQuery? Un bug de Webkit? Comment faire pour que mon curseur d’image réinitialise son minuteur à défilement automatique après un clic? Jquery Modal Dialog désactive les éléments de formulaire Comment détecter si un élément a défilé, mais une seule fois? Javascript regexp remplacer, multiline jquery star rating plugin et jquery click function L’application Rails elem est null dans classie.js vider les divs dans jQuery sans affecter les autres divs Quels sont les fichiers minimum nécessaires pour que jqGrid fonctionne avec MVC? jquery choisi l’interface de base du plugin ne fonctionne pas

Limiter le nombre de cases à cocher cochées

J’ai un formulaire avec plusieurs cases à cocher. J’ai trois catégories de cases à cocher dans le formulaire. Je dois limiter à un maximum de trois cases à cocher par catégorie.

J’ai utilisé ce script mais il se limite à trois cases à cocher par formulaire. 

jQuery(function(){ var max = 3; var checkboxes = jQuery('input[type="checkbox"]'); checkboxes.change(function(){ var current = checkboxes.filter(':checked').length; checkboxes.filter(':not(:checked)').prop('disabled', current >= max); }); });

Comment modifier le script ci-dessus pour limiter trois cases à cocher par catégorie dans un seul formulaire?

Exemple HTML: 

     Creative
 Euphoric
 Uplifted
    Option 1
 Option 2
 Option 3
    Option 1
 Option 2
 Option 3

Remarque: Le CAT_Custom_365571_2 etc., est généré par le CMS que j’utilise.

jQUERY 

 $("input[name=chk]").change(function(){ var max= 3; if( $("input[name=chk]:checked").length == max ){ $("input[name=chk]").attr('disabled', 'disabled'); $("input[name=chk]:checked").removeAttr('disabled'); }else{ $("input[name=chk]").removeAttr('disabled'); } });

HTML 

 A B C D E F G

FIDDLE EXEMPLE EST ICI

Essayez (si votre balisage correspond à celui du violon) 

 jQuery(function(){ var max = 3; var checkboxes = jQuery('input[type="checkbox"]'); checkboxes.click(function(){ var $this = $(this); var set = $this.add($this.prevUntil('label')).add($this.nextUntil(':not(:checkbox)')); var current = set.filter(':checked').length; return current <= max; }); });

Démo: Violon

Mettre à jour:
Puisque vous avez un nom pour les cases à cocher 

 jQuery(function(){ var max = 3; var checkboxes = jQuery('input[type="checkbox"]'); checkboxes.click(function(){ var $this = $(this); var set = checkboxes.filter('[name="'+ this.name +'"]') var current = set.filter(':checked').length; return current <= max; }); });

Démo: Violon

Essaye ça: 

 jQuery(function(){ var max = 3; var categories = jQuery('label'); // use better selector for categories categories.each(function(){ var checkboxes = $(this).find('input[type="checkbox"]'); checkboxes.change(function(){ var current = checkboxes.filter(':checked').length; checkboxes.filter(':not(:checked)').prop('disabled', current >= max); }); }); });

ajoutez simplement une classe à toutes les cases à cocher associées et utilisez simplement le sélecteur de classe lorsque vous cochez les cases d’une catégorie. par exemple:

HTML 

         ...

JS 

 jQuery(function(){ var max = 3; var cat1_checkboxes = jQuery('input.cat1[type="checkbox"]'); var cat2_checkboxes = jQuery('input.cat2[type="checkbox"]'); var cat3_checkboxes = jQuery('input.cat3[type="checkbox"]'); cat1_checkboxes.change(function(){ var current = cat1_checkboxes.filter(':checked').length; checkboxes.filter(':not(:checked)').prop('disabled', current >= max); }); cat2_checkboxes.change(function(){ var current = cat2_checkboxes.filter(':checked').length; checkboxes.filter(':not(:checked)').prop('disabled', current >= max); }); cat3_checkboxes.change(function(){ var current = cat3_checkboxes.filter(':checked').length; checkboxes.filter(':not(:checked)').prop('disabled', current >= max); }); });

Ceci est un code de débutant avec javascript . C’est comme travailler … à peine … J’appelle cette fonction sur chaque entrée. Mais il y a sûrement un moyen d’appeler cette fonction une fois. Cela fonctionne, mais décoche une case aléatoire de ceux qui l’appellent. 

  Education Religions News function just2cat() { var allInp = document.getElementsByTagName('input'); const MAX_CHECK_ = 2; /*How many checkbox could be checked*/ var nbChk =0; for(var i= 0; i MAX_CHECK_) { alert("At most 2 categories can be chosen"); allInp[i].checked=false; /* try to Unchek the current checkbox :'( */ } } } }