Limit checkbox checked in a group

webcrea 27 Oct, 2015
Hi,

I would to limit the number of checkbox be checked in a group

It's for a survey, I want only 3 checkbox could be checked on 10 possibility

I add an event and a function but I don't know how to count item

I tried
checkbox_group2[].each(
...
)

Regards
chris
GreyHead 27 Oct, 2015
Hi Christophe,

I have some MooTools code here that I wrote for CFv4. You should be able to do something similar in jQuery of CFv5
window.addEvent('domready', function() {
  var files = $$('input[name^=file_select][type=checkbox]');
  files.each(function(item) {
    item.addEvent('click', checkCount);
  });

  function checkCount() {
    var files_checked;
    files_checked = $$('input:checked[name^=file_select][type=checkbox]');
    if ( files_checked.length >= 5 ) {
      $('complete').setStyle('visibility', 'visible');
      files.each(function(el){
        if ( el.checked !== true ) {
          el.disabled = true;
        }
      });
    } else {
      $('complete').setStyle('visibility', 'hidden');
      files.each(function(el){
        el.disabled = false;
      });
    }
  }
});
Basically this checks how many boxes are checked, if there are five then it disables all the others until one is un-checked.

Bob
webcrea 27 Oct, 2015
Thanks Bob,

I roughly solved this issue with :

 function check3(e){
c=0;
if(jQuery("#checkbox_group2").attr('checked')) c++;
if(jQuery("#checkbox_group21").attr('checked')) c++;
if(jQuery("#checkbox_group22").attr('checked')) c++;
if(jQuery("#checkbox_group23").attr('checked')) c++;
if(jQuery("#checkbox_group24").attr('checked')) c++;
if(jQuery("#checkbox_group25").attr('checked')) c++;
if(jQuery("#checkbox_group26").attr('checked')) c++;
if(jQuery("#checkbox_group27").attr('checked')) c++;

if(c>2){
check("#checkbox_group2");
check("#checkbox_group21");
check("#checkbox_group22");
check("#checkbox_group23");
check("#checkbox_group24");
check("#checkbox_group25");
check("#checkbox_group26");
check("#checkbox_group27");
}else{
reactiver("#checkbox_group2");
reactiver("#checkbox_group21");
reactiver("#checkbox_group22");
reactiver("#checkbox_group23");
reactiver("#checkbox_group24");
reactiver("#checkbox_group25");
reactiver("#checkbox_group26");
reactiver("#checkbox_group27");
}

function check(id){
if(jQuery(id).attr('checked')=='checked')
 jQuery(id).prop('disabled', false);
else
 jQuery(id).prop('disabled', true);
}
}

function reactiver(id){
 jQuery(id).prop('disabled', false);
}


I know it's not portable but for the moment it works ;-)
This topic is locked and no more replies can be posted.