1

我在下面有一个生成 2 个下拉框的 html 代码。设置环境是带有 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”，则需要禁用卡片类型、卡片有效期和保险卡片编号元素。如果我选择“Y”值，他们应该启用。

如果我还从 pennmentcard 下拉列表中选择“N”，效果应该与上面类似，只是在这种情况下，pensioncard 和 pennmentcardexpiry 元素需要禁用。如果我选择“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”，则会按预期禁用卡片类型、保险卡号、卡片到期元素，但这也会禁用养老金卡号和养老金卡到期元素。它还将养老金卡下拉列表的值从“Y”更改为“N”。如果我在养老金卡下拉列表中将值更改为“N”，则会按预期禁用养老金卡号和养老金卡到期元素，但也会禁用卡类型、卡到期和保险卡号元素。我无法让这个逻辑正确播放。

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

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

有任何想法吗？

4

2 回答 2

1

这是一个原生 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'
      }
}
于 2013-09-03T07:48:50.027 回答
1

您需要将两个下拉列表的 on change 操作分开 e。G

 $("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”并且为真。如果你想比较read it价值$("#pensioncard").val()

于 2013-09-03T04:31:54.607 回答