JQuery Validate and Checkbox Click Function

Question

I have a basic checkbox click function that only allows the user to click only one checkbox within each fieldset (there are four fieldsets each containing numberous checkboxes:

$(document).ready(function(){

$('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 one option per breakout session.')

$(this).attr('checked',false); }

});

Then I have a submit function on the form that will confirm that at least one checkbox is selected before posting the form:

$('form[name=mainForm]').submit(function(){

    var error = '';

    // loop through each fieldset
    $('fieldset',this).each(function(){

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

        // if none are checked
        if(!numChecked){
            // set the error var
            error = 'At least one of your time sessions has no checkbox selected!';
            // add class to show user
            $(this).addClass('errorSessions');
        }
        else{
            $(this).removeClass('errorSessions');
        }

    });

    // if any errors, show them and don't allow the form to be submitted
    if(error.length){
        alert(error);
        return false;
    }

   $("#mainForm").validate();

The form validates perfectly and everything happens flawlessly the first time around. The problem is that if you submit the form, the validation occurs and it gives the error "At least one of your time sessions has no checkbox selected!" - at that point if you proceed to select multiple checkboxes within a given fieldset that was not initially checked, it will ignore the checkbox click function and allow you to select more than one checkbox in a fieldset.

Can someone please help with this?

jweisberg · Accepted Answer · 2011-01-06 22:56:30Z

1

Okay, I figured it out. The error has to do with the script adding the class 'errorsessions' to the fieldset which changes the unique classname of the fieldset. By adding a unique id to each fieldset and then changing the script to reference .attr('id'); instead of .attr('class'); the issue resolved and the on click alert function resumed after the class was added.

answered Jan 6, 2011 at 22:56

jweisberg

336 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ákos Nikházy · Accepted Answer · 2011-01-06 22:04:15Z

0

Do you consider using radio buttons as they are there for single selection? This way you don't have to check for multi selection as it isn't possible for select more than one radio button in given group.

answered Jan 6, 2011 at 22:04

Ákos Nikházy

1,30617 silver badges36 bronze badges

1 Comment

jweisberg Over a year ago

I had considered that, however the form is a bit more complex... I also have a change function that occurs for each checkbox that has the same name across the multiple fieldsets to disable duplicated checkboxes on the other fieldsets when the same one is selected within a given fieldset. I recall trying this with radio buttons and it didn't work, but I can give it another shot. However, I am wondering why the function gets disabled in the first case when the ajax request to validate is sent? Or does it have something with changing the class?

Collectives™ on Stack Overflow

JQuery Validate and Checkbox Click Function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related