2016-09-01 6 views
1

2つのマルチセレクションボックスがあります。 最初の選択ボックスの変更時に、2番目の選択ボックスの一部のグループを無効にします。jqueryブートストラップマルチセレクションの変更時にoptgroupを無効にする方法

私はそれがどのように私はそれを実装することができ、動作していない理由を理解しない複数選択プラグインの次のコードのonChange機能

$('optgroup[label=MyGroup2]').prop('disabled', true); 

を使用しています。..

答えて

1

次のようにあなたがrefresh methodを使用することができます。以下の例は、対応するボタンで最初のオプトグループを無効にする方法を示していますが、この例は、onChangeオプションでオプトグループを操作する具体的なケースに簡単に適応できます。オプションの状態(選択されているかどうか)はoptgroupを無効にした後も保持されるので、最初にオプションの選択を解除することをお勧めします。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#multiselect').multiselect(); 
 
     
 
     $("#multiselect-disable-optgroup1").on('click', function() { 
 
      $('#multiselect optgroup#optgroup1').prop('disabled', true); 
 
      $('#multiselect').multiselect('refresh'); 
 
     }); 
 
    }); 
 
</script> 
 
</head> 
 
<body> 
 
    <select id="multiselect" multiple="multiple"> 
 
     <optgroup label="Group 1" id="optgroup1"> 
 
      <option value="1">Option 1</option> 
 
      <option value="2">Option 2</option> 
 
      <option value="3">Option 3</option> 
 
     </optgroup> 
 
     <optgroup label="Group 2"> 
 
      <option value="4">Option 4</option> 
 
      <option value="5">Option 5</option> 
 
      <option value="6">Option 6</option> 
 
     </optgroup> 
 
    </select> 
 
    <button id="multiselect-disable-optgroup1">Disable Group 1</button> 
 
</body> 
 
</html>

+0

ありがとうございました – san

関連する問題