如何在第一個下拉列表中沒有選擇任何內容時禁用第二個多選下拉菜單？

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> 

和我的啓用/ disablescript下面是：

<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 prop，並檢查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>