Able to disable checkboxes on condition, but odd problem

Able to disable checkboxes on condition, but odd problem

I asked part of this question on stackoverflow but didn't get any answers I understood ( link). I was hoping that maybe someone here could point me in the right direction. I have very minimal experience with jQuery as I usually just scavenge what I can find in Google searches. This time however, I need something much more specific.


I found some jQuery code as a result of a Google search that allowed me to disable specific classes of checkboxes based on user input of a single select box. I works great and I even added some code to grey out the text describing the text box. However, I use PHP (a session variable in particular) and MySQL to repopulate the select box' value if the user goes back/revisits the page and when that happens the checkboxes are no longer greyed out based on the value of the select box. I presume it's because the function requires the user to actually select an option, not for it to be the selected option on page load. Is there any way around this? See code below:

  1. $(function() {
        var arrValPS = ["3-Year-Old Program", "Prekindergarten", "Kindergarten"];

        $("#grade").change(function() {
            var valToCheck = String($(this).val());

            if (jQuery.inArray(valToCheck, arrValPS) == -1) {
                $(".psc").attr("disabled", "true");
                jQuery('.pscdiv').fadeTo(500, 0.2);

            }
            else {
                $(".psc").removeAttr("disabled");
                jQuery('.pscdiv').fadeTo(500, 1);
            }
        });
    });
    $(function() {
        var arrValLS = ["1st Grade", "2nd Grade", "3rd Grade", "4th Grade", "5th Grade"];

        $("#grade").change(function() {
            var valToCheck = String($(this).val());

            if (jQuery.inArray(valToCheck, arrValLS) == -1) {
                $(".lsc").attr("disabled", "true");
                jQuery('.lscdiv').fadeTo(500, 0.2);

            }
            else {
                $(".lsc").removeAttr("disabled");
                jQuery('.lscdiv').fadeTo(500, 1);
            }
        });
    });
    $(function() {
        var arrValMS = ["6th Grade", "7th Grade", "8th Grade"];

        $("#grade").change(function() {
            var valToCheck = String($(this).val());

            if (jQuery.inArray(valToCheck, arrValMS) == -1) {
                $(".msc").attr("disabled", "true");
                jQuery('.mscdiv').fadeTo(500, 0.2);

            }
            else {
                $(".msc").removeAttr("disabled");
                jQuery('.mscdiv').fadeTo(500, 1);
            }
        });
    });

















































  1. Grade <select name="ci_grade" id="grade">
  2. <option selected="selected" value=""></option>
  3. <option value="3-Year-Old Program">3-Year-Old Program</option>
  4. <option value="Prekindergarten">Prekindergarten</option>
  5. <option value="Kindergarten">Kindergarten</option>
  6. <option value="1st Grade">1st Grade</option>
  7. <option value="2nd Grade">2nd Grade</option>
  8. <option value="3rd Grade">3rd Grade</option>
  9. <option value="4th Grade">4th Grade</option>
  10. <option value="5th Grade">5th Grade</option>
  11. <option value="6th Grade">6th Grade</option>
  12. <option value="7th Grade">7th Grade</option>
  13. <option value="8th Grade">8th Grade</option>
  14. <option value="Other">Other</option>
  15. </select><br /><br />
  16. <div class="pscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_1"/><label for="psc_1">AM - Week 1: Description Here</label></div>
  17. <div class="pscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_2"/><label for="psc_2">PM - Week 1: Description Here</label></div>
  18. <div class="lscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_3"/><label for="lsc_1">AM - Week 2: Description Here</label></div>
  19. <div class="lscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_4"/><label for="lsc_2">AM - Week 2: Description Here</label></div>
  20. <div class="mscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_5"/><label for="msc_1">PM - Week 2: Description Here</label></div>
  21. <div class="mscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_6"/><label for="msc_2">AM - Week 3: Description Here</label></div>




In addition to what I'm trying to accomplish with all of that, I would like to do something else that conditionally disables checkboxes. In the code above you'll notice that the descriptions for the checkboxes start with AM or PM (my actual code has about 30 checkboxes). For example, if an AM - Week 1 selection is made I would like to disable all other AM - Week 1 checkboxes. I realize I probably need to add a second class to the checkbox input to accomplish this, and that's no big deal, but I'm not sure where to begin with the jQuery part of it. I also wonder if adding a second condition to disable checkboxes will interfere with the first (the select box from the quote above).

Any help pointing me in the right direction would be greatly appreciated. What I'm seeing so far from jQuery, I'm loving it, I just haven't figured it out yet.