jQuery：從當前下拉之前/之後的選擇中選擇值

Question

我希望我能很好地解釋這一點。請注意下面的附圖。每個類都有一個「classtime」的類名，幷包含一個類的可用調度列表。

正如你可以在圖片的「說明」中看到的，我需要驗證用戶不會在背靠背的日子裏選擇類。我不知道如何在jQuery中做到這一點;我相當確定它可以完成，也可能很容易，但我不知道如何。

因此，計劃是對給定下拉列表的change（）事件進行操作，然後查看select之前和select之後的值，如果該值不爲0，則向用戶投訴並將當前下拉的值重置爲0.

謝謝！

Answer 1

這是禁止的一種方式。

$('select').change(function(){ 
 
    var hasVal = $(this).val() != 0; 
 
    var index = $('select').index(this); 
 
    var total = $('select').length; 
 

 
    //before select 
 
    if((index-1) >= 0){ 
 
     var disableBefore = hasVal; 
 
     // check incase 2 before has a value 
 
     if(!disableBefore && ((index-2) > 0)){ 
 
      disableBefore = $('select:eq(' + (index-2) + ')').val() != 0; 
 
     } 
 
     $('select:eq(' + (index-1) + ')').prop('disabled', disableBefore); 
 
    } 
 
    
 
    //after select 
 
    if((index+1) < total){ 
 
     var disableAfter = hasVal; 
 
     // check incase 2 after has a value 
 
     if(!disableAfter && ((index+2) < total)){ 
 
      disableAfter = $('select:eq(' + (index+2) + ')').val() != 0; 
 
     } 
 
     $('select:eq(' + (index+1) + ')').prop('disabled', disableAfter); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select> 
 
     <option value="0">a</option> 
 
     <option value="1">aa</option> 
 
    </select> 
 
</div> 
 
<div> 
 
    <select> 
 
     <option value="0">b</option> 
 
     <option value="1">bb</option> 
 
    </select> 
 
</div> 
 
<div> 
 
    <select> 
 
     <option value="0">c</option> 
 
     <option value="1">cc</option> 
 
    </select> 
 
</div> 
 
<div> 
 
    <select> 
 
     <option value="0">d</option> 
 
     <option value="1">dd</option> 
 
    </select> 
 
</div> 
 
<div> 
 
    <select> 
 
     <option value="0">e</option> 
 
     <option value="1">ee</option> 
 
    </select> 
 
</div> 
 
<div> 
 
    <select> 
 
     <option value="0">f</option> 
 
     <option value="1">ff</option> 
 
    </select> 
 
</div> 
 
<div> 
 
    <select> 
 
     <option value="0">g</option> 
 
     <option value="1">gg</option> 
 
    </select> 
 
</div>