jQuery-可以禁用条件复选框，但存在奇怪的问题

|| 我通过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 = [\“一年级\”，\“第二年级\”，\“三年级\”，\“四年级\”，\“五年级\”];


  $(\"#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 = [\“六年级\”，\“七年级\”，\“八年级\”];


  $(\"#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

我在下面尝试了阿卜杜拉的代码，但成功率为零。我也尝试了其他建议，但成功率为零。几个人说我基本上可以使用更少的代码，但是我尝试过的所有方法都没有用，而我现在可以正常使用，除了我发布此问题的一个烦人的问题。就我想缩小范围而言，这对我来说首先越过这个问题就越重要。
    
2020-01-07 4 条评论
分享

没有找到相关结果

    已邀请:

    膏焦凑

    这确实需要进一步重构，但是只是为了回答您的问题，您需要在页面加载时调用相同的代码，因此将其移入函数中，并在页面加载以及更改事件时调用它： 
    $(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);   
    } 
}
        
    2020-01-07 0 0
    分享

    翁茄口霉氖

    您只需在文档准备就绪时在要绑定的元素上触发一个change事件： 
    $(function() {
    $(\"#grade\").change();
});
    顺便说一句，您可以在同一\'change \'处理程序中拥有所有不同的用例。     
    2020-01-07 0 0
    分享

    渐首洽陈染

    在Page Load事件上调用该函数可以解决您的问题。     
    2020-01-07 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.046799182891846