I have a group of bootstrap-multiselects. How can I keep their 'Select All' option from clashing

Question

I have a group of bootstrap-multiselects:

<div id="filter-div" class="text-center">
    <select id="set" class="multiselect" multiple="multiple"></select>
    <select id="subject" class="multiselect" multiple="multiple"></select>
    <select id="demographic" class="multiselect" multiple="multiple"></select>
    <select id="grade" class="multiselect" multiple="multiple"></select>
</div>

and then, I enable them:

    $('#filter-div select').multiselect({
            includeSelectAllOption: true,
            selectAllValue: 'select-all-value'
    })

Then the problem comes: if I click 'Select All' on one of them, the 'Select All' checkboxes on the other multiselects also get checked (not all the options, just the select all one).

Seems I have to assign separate 'select-all-value' to each one of them. Is there an easy way? whether on the bootstrap-multiselect side or jQuery side.

Answer 1

It looks like when you click "Select All", the plugin is toggling all inputs with that selectAllValue instead of only inputs within that select. Unless they change their code there is nothing you can do except work around it.

Possible workaround it to just add a unique number to each selectAllValue.

$('#filter-div select').each(function(index, value) {
    $(this).multiselect({
        includeSelectAllOption: true,
        selectAllValue: 'select-all-value-' + index
    });
});

JSFiddle