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

Question

我在 Google 搜索中发现了一些 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);   
    }        
  });
});

复选框示例：

<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>

---

更新 #1

我在下面尝试了 Abdullah 的代码，但成功率为零。我还尝试了其他零成功的建议。有几个人说我基本上可以使用更少的代码，但是我尝试过的一切都没有奏效，而我现在所拥有的一切都完美无缺，除了我发布这个问题的一个烦人的问题。尽管我想把它变薄，但首先解决这个问题对我来说更重要。

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

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

Answer 3

在您的页面加载事件中调用该函数可以解决您的问题。