根据另一个选择元素禁用引导选择

Question

我有两个使用bootstrap select增强的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

​

$('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>

​

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

$('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修复的代码片段，它的功能与您尝试使用的代码片段非常相似。

将禁用的条件添加到select element.

• Calling .selectpicker('refresh')

• Added a条件，上面的2是基于这个条件调用的(查看代码中的注释

​

$('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');
});

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

​

希望这能有所帮助。:)

Answer 3

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

我使用了一点Shashank's answer，但将其修改为按您的要求执行：

​

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

select1.selectpicker().on('change', function () {
  select2.prop('disabled', $(this).val() === '2').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>

​