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

【问题标题】：Disable bootstrap select according to another select element根据另一个选择元素禁用引导选择
【发布时间】：2017-12-28 16:36:21
【问题描述】：

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

这是我的两个选择元素：

<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' );

【问题讨论】：

在您的第一个示例中，您似乎即将禁用用于选择某些内容的元素。这与应禁用其他元素的要求相矛盾。

标签： jquery html twitter-bootstrap

【解决方案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').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);
    });
});

【讨论】：

感谢您的回答。这适用于普通选择元素，但不适用于引导选择元素...参考：getbootstrap.com/docs/4.0/components/forms/#form-controls
在 JQuery 中都是一样的，Bootstrap 只在元素上应用 Style .. 试一试...
查看我的编辑@FrankGroot
@MatheusCuba 澄清一下； “Bootstrap Select”是一个完全替代<select>元素的jQuery插件；它不是 Bootstrap 框架的一部分，也不与 BS4s .custom-select 样式相关。

【解决方案2】：

你已经很接近让它发挥作用了。

您缺少的最重要的事情是选择元素的单独的 ID。

这是一个带有 ID 修复的代码 sn-p，并且与您尝试的操作非常相似，即

将禁用的prop 添加到选择元素。
致电.selectpicker('refresh')
添加了调用上述 2 的条件（查看代码中的 cmets）

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

希望这会有所帮助。 :)

【讨论】：

看起来您正在禁用原始元素而不是所需元素。
哦是吗？（编辑后我无法重新检查）我根据第一个输出禁用了第二个选择（countrySelect 正在选择第二个）。我猜我没有仔细检查，我的错。无论如何，感谢您的纠正，弗兰克似乎找到了解决方案。

【解决方案3】：

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

我使用了 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>

【讨论】：

【解决方案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>

【讨论】：