checkbox enable disable на основе выпадающего варианта

Question

Я создал выпадающий список и несколько флажков. флажки включены и отключены на основе выбранной опции выпадающего списка.

Вот код:

<select id="Objective" form="theForm" name="category" > 
    <option value="pi">Pipi</option> 
    <option value="theta">thethaatha</option> 
    <option value="sigma">sigmama</option> 
</select> 
<div> 
    <input type="checkbox" class="dissable" onclick="check();" value="1" /> Teas<br> 
    <input type="checkbox" class="dissable" onclick="check();" value="1" /> Capri<br> 
    <input type="checkbox" class="dissable" onclick="check();" value="2" /> Kids <br> 
    <input type="checkbox" class="dissable" onclick="check();" value="2" /> Food <br> 
</div> 

<script> 
$("#Objective").on("change", function() { 
    if ($(this).val() == "theta") { 
     $(".dissable[value='1']").prop("disabled", true); 
    } else if ($(this).val() == "pi") { 
     $(".dissable[value='2']").prop("disabled", true); 
    } else { 
     //donothing 
    } 
}).trigger('change'); 
</script> 

всякий раз, когда я выбираю пи из выпадающего списка он идет штраф как значение = «2» дети и еда получает отключены, но когда я выбираю тета от каждого флажок получает инвалидов, которые не должны быть как это. только значение = «1» должно быть отключено, т. е. чаи и капри.

Помогите скорректировать его в чем проблема с кодом. благодарит заранее.

Answer 1

Вы должны отменить между каждыми выберите изменения, так инвалид СВОИМ прибудут снова включен, так что если вы добавляете эти 2 строки в функции начала он будет работать

$(".dissable[value='1']").prop("disabled", true); 
    $(".dissable[value='2']").prop("disabled", true); 

примечания стороны, как «Ezequias Dinella "в своем ответе, чтобы включить/отключить все, вы также можете удалить атрибут, например $ (". Dissable "). Prop (" disabled ", true);

Образец

$("#Objective").on("change", function() { 
 
    $(".dissable[value='1']").prop("disabled", false); 
 
    $(".dissable[value='2']").prop("disabled", false); 
 
    
 
    if ($(this).val() == "theta") { 
 
     $(".dissable[value='1']").prop("disabled", true); 
 
    } else if ($(this).val() == "pi") { 
 
     $(".dissable[value='2']").prop("disabled", true); 
 
    } else { 
 
     //donothing 
 
     $(".dissable[value='1']").prop("disabled", true); 
 
     $(".dissable[value='2']").prop("disabled", true); 
 
    } 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="Objective" form="theForm" name="category" > 
 
    <option value="pi">Pipi</option> 
 
    <option value="theta">thethaatha</option> 
 
    <option value="sigma">sigmama</option> 
 
</select> 
 
<div> 
 
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Teas<br> 
 
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Capri<br> 
 
<input type="checkbox" class="dissable" onclick="check();" value="2" /> Kids <br> 
 
<input type="checkbox" class="dissable" onclick="check();" value="2" /> Food <br> 
 
</div>

Answer 2

Самый простой способ сделать это, это позволяет все галочки перед отключением Choosed те, для того, чтобы гарантировать, что только те, которые вы хотите отключены;

// enable all checkboxes 
$(".dissable").prop("disabled", false); 

, а затем вы можете отключить Choosed из них:

// disabling some of them 
$(".dissable[value='1']").prop("disabled", true); 

Рабочего пример: http://codepen.io/anon/pen/bwJaEp?editors=1010