禁用 bootstrap 多选取消全选按钮

Question

我想禁用 Deselect All 按钮。我也想保留 Select All 按钮。

这是我的 select:

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

Answer 1

您可以使用 this fiddle

$('#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">

Answer 2

在 onSelectAll callback 中，您可以隐藏或禁用该按钮，具体取决于您的 selection。

您可能还希望包含在特定情况下重新启用按钮的逻辑，但我不知道这些情况何时适合您。请注意，如果您手动 select 每个条目，则会发生此 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>

多选初始化：

$("#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);

我创建了一个fiddle demonstrating it here。

禁用 bootstrap 多选取消全选按钮

Disable bootstrap multiselect deselect all button

html

bootstrap-multiselect