jQuery - Able to disable checkboxes on condition, but odd problem

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:

$(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);

    }
    el开发者_Go百科se
    {
            $(".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);   
    }        
  });
});

An example of the checkboxes:

<div class="pscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_1"/><label for="psc_1">AM - Week 1: Description Here</label></div>
<div class="pscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_2"/><label for="psc_2">PM - Week 1: Description Here</label></div>
<div class="lscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_3"/><label for="lsc_1">AM - Week 2: Description Here</label></div>
<div class="lscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_4"/><label for="lsc_2">AM - Week 2: Description Here</label></div>
<div class="mscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_5"/><label for="msc_1">PM - Week 2: Description Here</label></div>
<div class="mscdiv"><input type="checkbox" class="psc" name="camps[]" value="psc_6"/><label for="msc_2">AM - Week 3: Description Here</label></div>

Update #1

I have tried Abdullah's code below with zero success. I have also tried the other suggestions with zero success. A couple people have said I could use less code basically, but everything I've tried hasn't worked whereas what I have now works perfectly except for the one nagging issue that I posted this question about. As much as I would like to thin it down it's way more important to me to get past the problem first.

This really needs to be refactored further but just to answer your question, you need to call the same code on page load so move it into a function and call it on page load as well as on the change event:

$(function(){
    $("#grade").change(checkVals);
    checkVals(); // run it on page load
});

function checkVals() {
    var valToCheck = String($("#grade").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);   
    }        

    var arrValLS = [ "1st Grade","2nd Grade","3rd Grade","4th Grade","5th Grade" ];
    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);   
    }        

    var arrValMS = [ "6th Grade","7th Grade","8th Grade" ];
    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);   
    } 
}

You just need to fire a change event on the element you are bingind to when the document is ready:

$(function() {
    $("#grade").change();
});

By the way, you could have all that different cases on the same 'change' handler.

Call that function on your Page Load event solve your problem.