I started with @glyuck answer but changed it a little bit. I didn't want the 'All' item to be selected and then have the bootstrap-select show 'N items selected' in which one of them was the 'All' item. So basically, for me, that item will 'never select', it is more or less just a 'button' to toggle the states.
My markup would look like this:
Then the code to make it work the way I wanted was:
$('.selectpicker.select-all').on('change', function () {
var selectPicker = $(this);
var selectAllOption = selectPicker.find('option.select-all');
var checkedAll = selectAllOption.prop('selected');
var optionValues = selectPicker.find('option[value!="[all]"][data-divider!="true"]');
if (checkedAll) {
// Process 'all/none' checking
var allChecked = selectAllOption.data("all") || false;
if (!allChecked) {
optionValues.prop('selected', true).parent().selectpicker('refresh');
selectAllOption.data("all", true);
}
else {
optionValues.prop('selected', false).parent().selectpicker('refresh');
selectAllOption.data("all", false);
}
selectAllOption.prop('selected', false).parent().selectpicker('refresh');
}
else {
// Clicked another item, determine if all selected
var allSelected = optionValues.filter(":selected").length == optionValues.length;
selectAllOption.data("all", allSelected);
}
}).trigger('change');
Thanks @glyuck for the inspiration.
Fiddle: http://jsfiddle.net/3Lr4jsz0/