Отключить загрузчик мультиселекта отменить выбор все кнопки - PullRequest
Новая
       6

Отключить загрузчик мультиселекта отменить выбор все кнопки

0 голосов
/ 27 апреля 2018

Я хочу отключить кнопку Deselect All. Я тоже хочу сохранить кнопку Select All.

Вот мой выбор : 

<select id="typeCheckboxSelect" class="selectpicker" name="typeSelector[]" multiple="multiple">
   <option class='typeCheckbox' type='checkbox' value='test1'>Test One</option>
   <option class='typeCheckbox' type='checkbox' value='test2'>Test Two</option>
   <option class='typeCheckbox' type='checkbox' value='test3'>Test Three</option>
</select>

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

В обратном вызове onSelectAll вы можете скрыть или отключить кнопку, в зависимости от вашего выбора.

Вы также, вероятно, захотите включить логику для повторного включения кнопки в определенных ситуациях, но я не знаю, когда эти ситуации будут для вас. Обратите внимание, что этот обратный вызов onSelectAll произойдет, если вы вручную выберете каждую запись.

HTML: 

<div id="selectContainer">
   <select id="typeCheckboxSelect" multiple="multiple">
      <option value='test1'>Test One</option>
      <option value='test2'>Test Two</option>
      <option value='test3'>Test Three</option>
   </select>
</div>

Инициализация MultiSelect: 

$("#typeCheckboxSelect").multiselect({
    includeSelectAllOption: true,
    onSelectAll: function() {
        $("#selectContainer .multiselect-container input[value='multiselect-all']").prop('disabled', true);
    }
});

Это просто отключит кнопку. Если вы хотите снова включить его, вы должны вызвать приведенный ниже код в любом обработчике, который вы хотите. 

$("#selectContainer .multiselect-container input[value='multiselect-all']").prop('disabled', false);

Я создал скрипку, демонстрирующую ее здесь .

0 голосов
/ 27 апреля 2018

Вы можете использовать эту скрипку 

$('#select_all').click(function() {
  $('#typeCheckboxSelect option').prop('selected', true);
  $("#de_select_all").prop('disabled', false);
});

$('#de_select_all').click(function() {
  $('#typeCheckboxSelect option').prop('selected', false);
  $(this).prop('disabled', true);
});

$(document).on('change', '#typeCheckboxSelect', function() {
  $("#de_select_all").prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="typeCheckboxSelect" class="selectpicker" name="typeSelector[]" multiple="multiple">
   <option class='typeCheckbox' type='checkbox' value='test1'>Test One</option>
   <option class='typeCheckbox' type='checkbox' value='test2'>Test Two</option>
   <option class='typeCheckbox' type='checkbox' value='test3'>Test Three</option>
</select>
<br>
<input type="button" id="select_all" name="select_all" value="Select All">
<br>
<input type="button" id="de_select_all" name="de_select_all" value="De Select All">
...