jQuery - 檢查如果選擇任何選項或未選擇所有選擇選項

Question

如何檢查是否有選擇選項添加類到父div或所有選擇選項未選中是否從父級div中刪除類？

HTML：

<div class="toggler_container"> 
<select name="select" id="aaa"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
<select name="select" id="bbb"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
<select name="select" id="ccc"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
</div> 

的jQuery：

$(".toggler_container select").on("change", function() { 
if ($(this).val() == "0"){ 
    $(this).closest(".toggler_container").removeClass("booked"); 
} 
else { 
    $(this).closest(".toggler_container").addClass("booked"); 
} 
}); 

現在能選擇的選項，但不是工作取消選擇所有選項。我只想在所有選擇選項未選中時才從父div中移除類。 http://jsfiddle.net/nasxLpaL/

Answer 1

你可以檢查，看看是否與「0」值來選擇股權總數等於select標籤總數：

JS Fiddle

$(".toggler_container select").on("change", function() { 
    var selected = $('option[value="0"]:selected'); 
    var selectTotal = $('select').length; 

    if (selected.length == selectTotal) { 
     $(this).closest(".toggler_container").removeClass("booked"); 
    } else { 
     $(this).closest(".toggler_container").addClass("booked"); 
    } 
}); 

Answer 2

其實你必須再次檢查所有selects如果他們中的任何一個有一些有效的值並切換bit on/off。然後根據位值，您可以將class添加到您的parent div。

<div class="toggler_container"> 
<select name="select" id="aaa"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
<select name="select" id="bbb"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
<select name="select" id="ccc"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
</div> 
<script> 
    $(".toggler_container select").on("change", function() { 
     var is_ok = false; 
     $(".toggler_container select").each(function(key,obj){ 
      if($(obj).val() != 0) 
       is_ok = true; 
     }); 

     if(is_ok) 
      $(this).closest(".toggler_container").addClass("booked"); 
     else 
      $(this).closest(".toggler_container").removeClass("booked"); 
    }); 
</script> 

Answer 3

如果我正確理解你正在嘗試做什麼，我認爲你試圖驗證父母是否被選中。如果這是真的，你必須實現一些邏輯來驗證。就像這樣：

if($('#select2 :selected').val() != 0 && $('#select1 :selected').val() == 0) 
{ 
    //here you have to introduce your actions because the first select (select1) don't have any option selected. 
} 

Answer 4

你可以做這樣的事情

$(".toggler_container select").on("change", function() { 
    if ($(this).val() == "0"){ 
     removeClass = true; 
     $(this).parent().find("> select").each(function(){ 
      if($(this).val() != 0) 
       removeClass = false; 
     }) 
     if(removeClass) 
      $(this).closest(".toggler_container").removeClass("booked"); 
    } 
    else 
    { 
     $(this).closest(".toggler_container").addClass("booked"); 
    } 
}