jquery - 根据另一个选择元素禁用 Bootstrap 选择

Question

我有两个使用 Bootstrap 选择增强的选择元素。当在其中一个选择元素上设置值时，需要禁用另一个。

这是我的两个选择元素:

<select class="form-control selectpicker" id="select-1" name="select-1" data-live-search-placeholder="Search..." data-live-search="true" style="font-family:Open Sans, FontAwesome">
    <option data-tokens="disabled" value="" data-hidden="true" data-icon="fa fa-location-arrow">Element 1</option>
        <?php foreach ( $items as $item ) { ?>
            <option data-tokens="<?= $item['value']; ?>"><?= $item['value']; ?></option>
        <?php } ?>
</select><br>
<select class="form-control selectpicker" id="select-2" name="select-2" data-live-search-placeholder="Search..." data-live-search="true" style="font-family:Open Sans, FontAwesome">
    <option data-tokens="disabled" value="" data-hidden="true" data-icon="fa fa-calendar">Element 2</option>
        <?php foreach ( $moreItems as $item ) { ?>
            <option data-tokens="<?= $item['value'] ?>"><?= $item['label'] ?></option>
        <?php } ?>
</select>

到目前为止我想到了什么:

jQuery("select").change(function() {
    if(????){
       jQuery(this).prop("disabled")
    }
});

和

jQuery( 'select' ).prop( 'disabled','disabled' ).selectpicker( 'refresh' );

Answer 1

$('select').change(function(){
    $(this).addClass('active');
    $('select:not(.active)').prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<select class="form-control">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>


<select class="form-control">
  <option value="11">7</option>
  <option value="21">8</option>
  <option value="31">9</option>
  <option value="41">10</option>
  <option value="51">11</option>
  <option value="61">12</option>
</select>

简单，使用可以使用一个简单的类来指示什么 select 是事件的，如下所示:

$('select').change(function(){
    $(this).addClass('active');
    $('select:not(.active)').prop('disabled', true);
});

或者，禁用<select>没有值(value)的标签:

$('select').change(function(){
    $('select:').each(function(){
        if(!$(this).val()) $(this).prop('disabled', true);
    });
});