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

如何解决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 我在下面尝试了阿卜杜拉的代码,但成功率为零。我也尝试了其他建议,但成功率为零。几个人说我基本上可以使用更少的代码,但是我尝试过的所有方法都没有用,而我现在可以正常使用,除了我发布此问题的一个烦人的问题。就我想缩小范围而言,这对我来说首先越过这个问题就越重要。     

解决方法

这确实需要进一步重构,但是只是为了回答您的问题,您需要在页面加载时调用相同的代码,因此将其移入函数中,并在页面加载以及更改事件时调用它:
$(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);   
    } 
}
    ,您只需在文档准备就绪时在要绑定的元素上触发一个change事件:
$(function() {
    $(\"#grade\").change();
});
顺便说一句,您可以在同一\'change \'处理程序中拥有所有不同的用例。     ,在Page Load事件上调用该函数可以解决您的问题。     

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?