jQuery - Multiple condition disable checkboxes

Question

This is related to another question I asked but more complex (question here: jQuery - Able to disable checkboxes on condition, but odd problem)

I now have working code that disables checkboxes based on a select-box selection: http://jsfiddle.net/gDHGY/2/

The code in the link above will disable checkboxes based on the grade level. I need to further disable checkboxes based on other checkbox selections. For example, if a checkbox with the "am" and "week1" classes is toggled I need to disable all other "am week1" checkboxes. There's also another class called "full" for full day. Another example being: if a checkbox with classes "full week1" is selected I need to disable both "am week1" and "pm week1" checkboxes. There are 6 weeks of camp total and just the AM, PM, and Full Day options. I really hope that all made sense. If not by all means let me know and I'll try to explain better.

Is it possible to modify the code I have to do this or am I looking at using secondary code to accomplish this?

EDIT #2: Updated the jsFiddle link above... again.

Update #1: Ian's code works great I just need to figure out how to make it run the same functions when the checkboxes are already checked on page load.

do you mean if you toggle "am week1", the other "pm week1" will disable? Because I don't see any other "am week1" that is enabled together with the group of enabled checkboxes — Ian Jasper
– Ian Jasper, Commented Apr 20, 2011 at 6:09
@Ian Jasper Bardoquillo You are quite right - I didn't have enough checkboxes for the scenario. Sorry about that. I just updated the link above to one with a lot more checkboxes to play with. jsfiddle.net/gDHGY/1 — Vincent
– Vincent, Commented Apr 20, 2011 at 6:34
Based on your updated jsfiddle, I am wondering if you changed the classes or the logic was also changed... What checboxes will disable if I toggle say for example am week 1? Should I look for all am week 1 still and disable it or a new rule applies? — Ian Jasper
– Ian Jasper, Commented Apr 20, 2011 at 6:57
Argh! I managed to mess it up again.. that's what I get for trying to just copy and paste without editing. The logic is meant to be the same. I fixed it again (hopefully for the final time). jsfiddle.net/gDHGY/2 — Vincent
– Vincent, Commented Apr 20, 2011 at 7:10

Ian Jasper · Accepted Answer · 2011-04-20 08:16:28Z

2

Please check on my solution. Hope this helps :)

http://jsfiddle.net/gDHGY/3/

answered Apr 20, 2011 at 8:16

Ian Jasper

3,0787 gold badges39 silver badges60 bronze badges

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

3 Comments

Vincent Over a year ago

Extremely helpful and it worked beautifully. How would you go about doing the same thing not just on the click of a checkbox but also if one of the checkboxes is checked on page load (like if the input tag contains checked=yes)? Thank you Ian.

Ian Jasper Over a year ago

Your welcome Vincent :) Please mark it as the correct answer :) So how would that be? Should I select an item first on the dropdown list and then see if there are checkboxes that is checked and trigger the event?

Vincent Over a year ago

Sorry I thought I had marked it. It's done. :) In the case of it being selected already the dropdown option will also have been selected. I use PHP to populate the data based on session variables and if the person has gotten far enough to have the data populated the grade will already be selected on the dropdown box. That's one reason that I made sure the jQuery code for disabling checkboxes based on grade worked on page load, not just user input. Thanks again!

Chris Bailey · Accepted Answer · 2011-04-20 08:30:08Z

0

From looking at your code I think what you'll need is to is bind an event to your checkboxes:

$('input[type=checkbox]').click(function() {
    var classList = $(this).attr('class').replace(/\s+/g, ".");
    if ($(this).attr('checked')) {
        $('input.' + classList).attr('disabled', 'true');
        $(this).removeAttr('disabled');
    } else {
        $('input.' + classList).removeAttr('disabled', 'true');   
    }
});

This won't totally solve your problem as it only disables exactly the same classes (i.e. selecting full week1 won't disable am week1 classes), but some regexps on the classList to change what it's looking for should fix that for you (sorry - would do this myself but the caffeine's not quite kicked in yet this morning)

answered Apr 20, 2011 at 8:30

Chris Bailey

4,13626 silver badges28 bronze badges

1 Comment

Chris Bailey Over a year ago

I see Ian's come up with a much better solution - i'd go with that personally

Collectives™ on Stack Overflow

jQuery - Multiple condition disable checkboxes

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related