最初のドロップダウンで何も選択されていない場合、2番目のマルチ選択ドロップダウンを無効にするにはどうすればよいですか？

Question

私は以下のコードを使用していますが、最初のドロップダウンリストから値を選択した後、2番目のドロップダウンボックスは常にディスエーブル状態のままです。どのように無効にし、最初の複数選択ドロップダウンに基づいて2番目の複数選択ドロップダウンを有効にする？

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

複数選択のための私のスクリプト、私は貼り付けることはできませんよ。最初の複数選択ドロップダウンで何も選択されていない場合、2番目の複数選択ドロップダウンを無効/有効にするにはどうすればよいですか？

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>