根据另一个select元素禁用bootstrap select

Question

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

这是我的两个选择元素：

<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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

简单，使用可以使用一个简单的类来指示哪个选择是活动的，如下所示：

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

或，停用没有价值的<select>代码：

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

Answer 2

你非常接近于让它发挥作用。

您最缺少的是选择元素的单独ID 。

这是一个带有ID修复的代码片段，几乎与您尝试的相似，即

1. 将禁用的prop添加到select元素。
2. 致电.selectpicker('refresh')
3. 添加了一个条件，根据该条件调用上述2个（查看代码中的注释）
＆＃13;
＆＃13;
$('select.selectpicker').selectpicker().on('change', function () {

	// select the <select> to be disabled
	var countrySelect = $('select#select-1');
  
	// add disabled property based on some condition and refresh the selectpicker
	countrySelect.prop('disabled', $(this).val() === '2');
  countrySelect.selectpicker('refresh');
});
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>


<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>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   
</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>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
＆＃13;
＆＃13;
＆＃13;

希望这会有所帮助。 ：）

Answer 3

如果我理解正确，您希望在第一个元素中选择某个选项时禁用第二个选择元素。

我稍微使用了Shashank's answer，但修改了它以按照您的要求执行：

＆＃13;

＆＃13;

var select1 = jQuery('#select-1'),
  select2 = jQuery('#select-2');

select1.selectpicker().on('change', function () {
  select2.prop('disabled', $(this).val() === '2').selectpicker('refresh');
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>


<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>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   
</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>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 4

感谢您帮助@Shashank和@ halfpastfour.am以及您的答案，我得到了以下解决方案。

var select1 = jQuery('#select-1'),
  select2 = jQuery('#select-2');

select1.selectpicker().on('change', function () {
  select2.prop('disabled', $(this).val() != '').selectpicker('refresh');
});

select2.selectpicker().on('change', function () {
  select1.prop('disabled', $(this).val() != '').selectpicker('refresh');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>


<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>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   
</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>
    <option value="4">4</option>
    <option value="5">5</option>
</select>