Question

我在下面有一个html代码生成2个下拉框。设置环境是带有Chrome集成的Netbeans 7.3。 Jquery 2.0.3被添加到Netbeans的路径中。

<div class="patientHealthInsurance">
    <label class="fonttype">Health Insurance:</label><br>
    <label class="fonttype">Card:</label>
            <select name="card" id="card">
                <option value="Y">Y</option>
                <option value="N">N</option>
            </select>
    <label class="fonttype">Card Type:</label>
            <select name="cardtype" id="cardtype">
                <option value="MBF">MBF</option>
                <option value="NIB">NIB</option>
                <option value="HCF">HCF</option>
            </select>
    <label class="fonttype">Card Number:</label>
                <input type="text" name="insurancecardnumber"id="insurancecardnumber"/>
    <label class="fonttype">Card Expiry Date:</label>
                <input type="date" name="cardexpiry" id="cardexpiry"/>
</div>

<div class="patientPension">
    <label class="fonttype">Pension:</label><br>
    <label class="fonttype">Card:</label>
            <select name="pensioncard" id="pensioncard">
                <option value="Y">Y</option>
                <option value="N">N</option>
            </select>
    <label class="fonttype">Pension Card Number:</label>
                <input type="text" name="pensioncardnumber" id="pensioncardnumber"/>
    <label class="fonttype">Card Expiry Date:</label>
                <input type="date" name="pensioncardexpiry" id="pensioncardexpiry"/>
 </div>

我还有一个jquery / javascript，它给上面的html带来了一些动态。如果我在卡片下拉列表中选择“N”值，则需要禁用cardtype，cardexpiry和insurancecardnumber元素。如果我选择“Y”值，则应启用。

如果我还从养老金卡下拉列表中选择“N”，则效果应与上述类似，只有在这种情况下，养老金卡和养老金卡片支付元素需要禁用。如果我选择“Y”，那么他们应该启用。

我的Jquery / Javascript遵循......

$(document).ready(function(){
    $("select").change(function(){
    if ($("#card").val("N")){
        $("#cardtype").attr("disabled",true);
        $("#insurancecardnumber").attr("disabled",true);
        $("#cardexpiry").attr("disabled",true);
}
    else if($("#card").val("Y")){
        $("#cardtype").attr("disabled",false);
        $("#insurancecardnumber").attr("disabled",false);
        $("#cardexpiry").attr("disabled",false);
}
    if ($("#pensioncard").val("N")){
        $("#pensioncardnumber").attr("disabled",true);
        $("#pensioncardexpiry").attr("disabled",true);         
}
    else if($("pensioncard").val("Y")){
        $("pensioncardnumber").attr("disabled",false);
        $("pensioncardexpiry").attr("disabled",false);
}
});
});

结果非常出乎意料。如果我在卡片下拉列表中选择“N”，则会按预期禁用cardtype，insurancecardnumber，cardexpiry元素，但这也会禁用pensioncardnumber和pensioncardexpiry元素。它还将养老金卡下拉列表中的值从“Y”更改为“N”。如果我在养老金卡下拉列表中将值更改为“N”，则会按预期禁用pensioncardnumber和pensioncardexpiry元素，但也会禁用cardtype，cardexpiry和insurancecardnumber元素。我无法正确地发挥这种逻辑。

另一个含糊之处是，如果我尝试在chrome中手动将两个下拉菜单的值更改为“Y”，则值始终默认为“N”。

总之，似乎在任一下拉列表中选择“N”会禁用所有5个元素并手动将“N”更改为“Y”，因为它只是默认为“N”。

有什么想法吗？

Answer 1

您需要为两个下拉菜单分隔更改操作e。克

 $("select[name='card']").change(function(){
   ...
 })

$("select[name='pensioncard']").change(function(){
   ...
 })

检查jsfiddle

$("select[name='card']").change(function(){
     var disableIt=$(this).val()=='N' ? true : false;
      $("#cardtype").attr("disabled",disableIt);
      $("#insurancecardnumber").attr("disabled",disableIt);
      $("#cardexpiry").attr("disabled",disableIt);     
 }); 

 $("select[name='pensioncard']").change(function(){
     var disableIt=$(this).val()=='N' ? true : false;
      $("#pensioncardnumber").attr("disabled",disableIt);
        $("#pensioncardexpiry").attr("disabled",disableIt);          
 });

您所拥有的服务器类型的错误if($("#pensioncard").val("N"))将始终将值设置为“N”，并且为true。如果您想通过read it

比较值$("#pensioncard").val()

Answer 2

这是一个原生的HTML和JavaScript解决方案：

HTML：将一个不同的类添加到要切换禁用属性的输入字段。在这个例子中：'pensionClass'。

<input type="text" name="pensioncardnumber" id="pensioncardnumber" class="pensionClass"/>
<input type="date" name="pensioncardexpiry" id="pensioncardexpiry" class="pensionClass"/>

在onchange上添加一个函数：

<select name="pensioncard" id="pensioncard" onchange="toggleAttribute('pensionClass',this.selectedIndex)">

JAVASCRIPT：

toggleAttribute = function(className,index){
      var eLs = [].slice.call(document.getElementsByClassName(className),0);
      for(var i=0; i<eLs.length; i++){
         eLs[i].disabled=(index==0 ? false : true); //index 0 is for 'Yes'
      }
}

根据下拉列表的条件禁用表单元素

2 个答案: