Отключить элементы формы на основе условия выпадающего списка

Question

У меня есть html-код ниже, который генерирует 2 раскрывающихся списка. Среда установки - Netbeans 7.3 с интеграцией Chrome. 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» в раскрывающемся списке карты, необходимо отключить типы карточек, 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» в раскрывающемся списке карты, это отключит тип карты, номер страховой карточки, элементы кард-экспириума, как и ожидалось, однако это также отключает элементы пенсионной карты и элементы пенсионного карточного диска. Он также изменяет значение от «Y» до «N» выпадающего списка пенсионных карт. Если я изменю значение на «N» в раскрывающемся списке пенсионных карточек, это отключит элементы пенсионной карточки и пенсионного фона, как и ожидалось, но также отключит элементы карточного типа, cardexpiry и insurancecardnumber. Я не могу правильно понять эту логику.

Еще одна двусмысленность заключается в том, что если я попытаюсь вручную изменить значение обоих выпадающих списков на «Y» в хроме, значение всегда будет по умолчанию «N».

Таким образом, при выборе «N» в выпадающем списке отключены все 5 элементов, и изменение «N» на «Y» вручную не может произойти, поскольку по умолчанию оно равно «N».

Любые идеи?

Answer 1

Вам необходимо отделить действие on change для обоих выпадающих меню 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» и будет истинным. если вы хотите сравнить значение 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' 
     } 
}