JQuery - Advanced Check box Handling

Question

I have four fieldsets of checkboxes. Each fieldset is a timeslot (12-1, 1-2, 2-3, 3-4) and within each fieldset, I have seminars (seminar 1, seminar 2, seminar3... etc.)

One can select to attend only one seminar per fieldset, or timeslot. One cannot select the same seminar across multiple timeslots. Some timeslots have unique seminars that do not appear in any other timeslot All timeslots have an option to not attend a seminar during that timeslot.

So.... I'm using the following code to disable duplicate checkboxes across four fieldsets:

  $(window).load(function(){
  $('input[type=checkbox]').change(function(){
    name = $(this).attr('name');
    id = $(this).attr('id');
    checked = $(this).attr('checked');
    $('input[type=checkbox][name='+name+']:not(#'+id+')')
        .attr('disabled',checked)
        .each(function(){
            lid = $(this).attr('id');
            if (checked) {
                $('label[for='+lid+']').addClass('disabled');
            } else {
                $('label[for='+lid+']').removeClass('disabled');
            }

        });

});
  });

This is working perfectly, however, I also need to prevent the user from checking only one checkbox per fieldset... or alert them when they try to check off more than one checkbox within the fieldset. Is there a way to edit the above script to accomplish this?

Thanks!

Answer 1

You should get the number of checked checkboxes and do your validation from there

$('input[type=checkbox]').click(function(){

    // get the checked elements in this fieldset    
    var numChkd = $(this).siblings(':checked').size();

    // do whatever kind of validation you need
    if(!numChkd && !this.checked){
        alert('Please select at least one');
        // keep it checked?
        $(this).attr('checked',true);
    };

});

Demo here

---

Another Demo -- Shows when you try to deselect more than 2. It's really only a matter of changing your validation to suit your needs though;

$('input[type=checkbox]').click(function(){

    var numChkd = $(this).siblings(':checked').size();

    if(numChkd <= 1 && !this.checked){
        alert('Please select at least two');
        $(this).attr('checked',true);
    };

});

---

Another demo to answer comment. It's just a matter of changing the if() statement.

if(numChkd >= 1){
    alert('Please select only one per fieldset');
    $(this).attr('checked',false);
};

---

Another Demo - I believe there is some issues w/ the html. Namely the onclick attached to each input. The reason why it wasn't working on your html is because it relies on traversing (e.g. finding the parent fieldset).

$('input[type=checkbox]').click(function(){

    // get the fieldset class
    var fieldset = $(this).parents('fieldset').attr('class');

    // set the number of checked
    var numChecked = $('.'+fieldset+' input:checked').size();

    // if more than 1
    if(numChecked > 1){
        alert('Please select only 1')
    }

});