2016-09-01 5 views
1

У меня есть два многозадачных поля, При изменении первого окна выбора я хочу отключить некоторые группы второго блока выбора.как я могу отключить optgroup при изменении jquery bootstrap multiselect

Я использую следующий код OnChange функции Множественный плагин

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

Я не понимаю, почему он не работает, как я могу реализовать ..

ответ

1

Вы можете использовать refresh method следующим , В приведенном ниже примере демонстрируется использование, когда первая группа optgroup будет отключена соответствующей кнопкой, однако пример может быть легко адаптирован к вашему конкретному случаю манипуляции группами opt в группе onChange. Обратите внимание, что состояние опций (то есть независимо от того, выбрано или нет) сохраняется после отключения группы opt, поэтому вы можете сначала отменить выбор параметров.

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