jQuery -能够在条件下禁用复选框，但问题很奇怪

Question

我发现了一些jQuery代码，这是谷歌搜索的结果，它允许我根据用户输入的单个复选框禁用特定类别的复选框。我工作得很好，我甚至添加了一些代码来将描述文本框的文本进行灰色化。但是，如果用户返回/重新访问页面，则使用PHP (特别是会话变量)和MySQL重新填充复选框的值，当出现这种情况时，复选框将不再基于复选框的值而变灰。我认为这是因为函数要求用户实际选择一个选项，而不是让它成为页面加载上的选择选项。有办法绕过这件事吗？见下面的代码：

​

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




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. 

Answer 1

这确实需要进一步重构，但为了回答您的问题，您需要在页面加载时调用相同的代码，因此将其移动到一个函数中，并在页面加载和更改事件中调用它：

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

Answer 2

当文档准备就绪时，只需对要绑定的元素触发一个更改事件：

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

顺便说一句，您可以在同一个“change”处理程序上使用所有不同的情况。

Answer 3

在Page事件上调用该函数解决问题。