jQuery-可以在有条件的情况下禁用复选框，但存在奇怪的问题 [英] jQuery - Able to disable checkboxes on condition, but odd problem

问题描述

我通过Google搜索发现了一些jQuery代码，这些代码使我可以根据单个选择框的用户输入来禁用特定类别的复选框.我的工作很棒，甚至添加了一些代码来将描述文本框的文本显示为灰色.但是，如果用户返回/重新访问页面，则我使用PHP(特别是会话变量)和MySQL重新填充选择框的值，并且在这种情况下，基于选择框的值，复选框不再显示为灰色.我认为这是因为该功能要求用户实际选择一个选项，而不是使其成为页面加载时的选定选项.有没有办法解决?参见下面的代码:

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

$("#grade").change(function(){ var valToCheck = String($(this).val());

if ( jQuery.inArray(valToCheck,arrValPS) == -1 )
{

$(.psc").attr("disabled"，"true"); jQuery('.pscdiv').fadeTo(500,0.2);

$(".psc").attr("disabled", "true"); jQuery('.pscdiv').fadeTo(500,0.2);

}
else
{
        $(".psc").removeAttr ( "disabled" ); 
        jQuery('.pscdiv').fadeTo(500,1);   
}        

})； }); $(function(){ var arrValLS = [一年级"，第二年级"，三年级"，四年级"，五年级"];

}); }); $(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 = ["6年级"，"7年级"，"8年级"];

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

---

Update #1

我在下面尝试了阿卜杜拉(Abdullah)的代码，但成功率为零.我还尝试了其他建议，但成功率为零.几个人说我基本上可以使用更少的代码，但是我尝试过的所有方法都行不通，而我现在所做的一切都很好，除了我发布此问题的一个烦人的问题.尽管我想精简一下，但对我来说，越过这个问题就越重要.

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

这篇关于jQuery-可以在有条件的情况下禁用复选框，但存在奇怪的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！