jQuery：从当前下拉前后的Select中选择值

Question

我希望我能解释清楚。请注意下面的附图。每个人的班级名称为＆＃34; classtime＆＃34;并包含一个类的可用计划列表。

正如您在＆＃34;说明中所看到的那样＃34;在图像中，我需要验证用户在背靠背的日子里没有选择类。我不确定如何在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>