Question

我正在使用下面的代码，但是第二个下拉框总是在选择值形式第一个下拉列表后保持在禁用状态。如何根据第一个多选下拉列表禁用和启用第二个多选下拉列表？

<select id="multi-select-demo" multiple="multiple" style="display: none;">  
<option value="analysis">Analysis</option>
<option value="algebra">Linear Algebra</option>
<option value="discrete">Discrete Mathematics</option>
<option value="numerical">Numerical Analysis</option>
<option value="probability">Probability Theory</option>

<select id="multi-select-demo1" multiple="multiple" style="display: none;">
<option value="programming">Introduction to Programming</option>
<option value="automata">Automata Theory</option>
<option value="complexity">Complexity Theory</option>
<option value="software">Software Engineering</option>

我的启用/禁用脚本如下：

<script>
$('#multi-select-demo').change(function(e){
$('#multi-select-demo1').prop('disabled', !$(this).val());

});
$(function(){
  $('#multi-select-demo').prop('disabled', true);
  $('#multi-select-demo1').prop('disabled', true);
});
</script>

我的多选选择的脚本，我无法粘贴。如果在第一个多选下拉列表中没有选择任何内容，如何禁用/启用第二个多选下拉列表？

Answer 1

多选value是一个数组，因此请检查length。

$('#multi-select-demo').change(function(event) {
  $('#multi-select-demo1').prop('disabled', !$(this).val().length);
});

JSFiddle演示：https://jsfiddle.net/842gpv77/1/

Answer 2

您需要更改条件，以便在未选择任何选项时禁用选择。最可靠的方法是 selectedIndex 属性为-1。

您还需要重置按钮上的侦听器，以便在重置表单时，将选择设置为禁用：

window.onload = function(){
  document.getElementById('multi-select-demo').addEventListener('change',function(){
    document.getElementById('multi-select-demo1').disabled = this.selectedIndex == -1;
  },false);
  
  document.getElementById('formReset').addEventListener('click',function(){
    document.getElementById('multi-select-demo1').disabled = true;
  },false);
}

<form>
<select id="multi-select-demo" multiple="multiple">  
  <option value="analysis">Analysis</option>
  <option value="algebra">Linear Algebra</option>
  <option value="discrete">Discrete Mathematics</option>
  <option value="numerical">Numerical Analysis</option>
  <option value="probability">Probability Theory</option>
</select>
<select id="multi-select-demo1" multiple="multiple" disabled>
  <option value="programming">Introduction to Programming</option>
  <option value="automata">Automata Theory</option>
  <option value="complexity">Complexity Theory</option>
  <option value="software">Software Engineering</option>
</select>
<input id="formReset" type="reset">
</form>

Answer 3

查看bootstrap-multiselect Methods

您只需使用.multiselect('disable')和.multiselect('enable')方法即可。

在多选配置中使用onChange道具并检查this.$select.val()，如果选择了任何内容，它将为您提供所选值的数组。如果未选择任何内容，则会返回null。

这是一个例子。

var $sel1 = $('#multi-select-demo');
var $sel2 = $('#multi-select-demo1');

$sel1.multiselect({
nonSelectedText: "Choose from Bar",
  onChange: function(option, checked, select) {
  if (this.$select.val() && this.$select.val().length) {
    $sel2.multiselect('enable')
  } else {
    $sel2.multiselect('disable')
  }
}
});

$sel2.multiselect({
disabledText: 'Select Bar first'
});

@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<select id="multi-select-demo" multiple="multiple">
  <option value="analysis">Analysis</option>
  <option value="algebra">Linear Algebra</option>
  <option value="discrete">Discrete Mathematics</option>
  <option value="numerical">Numerical Analysis</option>
  <option value="probability">Probability Theory</option>
</select>

<select id="multi-select-demo1" multiple="multiple" disabled="disabled">
  <option value="programming">Introduction to Programming</option>
  <option value="automata">Automata Theory</option>
  <option value="complexity">Complexity Theory</option>
  <option value="software">Software Engineering</option>
</select>

如果在第一次下拉列表中未选择任何内容，如何禁用第二个多选下拉列表？

3 个答案: