Search code examples
htmlbootstrap-multiselect

Disable bootstrap multiselect deselect all button


I want to disable the Deselect All button. I want to keep the Select All button too.

Here's my 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>

Solution

  • In the onSelectAll callback, you can hide or disable the button, depending on your selections.

    You will also probably want to include logic to re-enable the button given certain situations, but I do not know when those situations would be for you. Note that this onSelectAll callback will occur if you manually select every entry.

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

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

    This will simply disable the button. If you want to re-enable it, you would call the below code in whatever handler you want.

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

    I have created a fiddle demonstrating it here.