How to enable/disable bootstrap selectpicker by ickeck checkbox

If your select picker has more than just a few options, the current accepted answer is incredibly slow. (can cause a hang around half a second, which is way too long to just make something disabled.)

This worked for me:

Disable:

$("#yourSelect").prop("disabled", true);
$(".selectpicker[data-id='yourSelect']").addClass("disabled");

Enable:

$("#yourSelect").prop("disabled", false);
$(".selectpicker[data-id='yourSelect']").removeClass("disabled");

This also has the added bonus of actually showing what the value of the select was when it was disabled. (which is the behavior of select boxes)

I'm kind of surprised the official documentation suggests to use refresh just to disable it, it takes way too long.

this is used to make disabled.

$('.selectpicker').prop('disabled', true);
$('.selectpicker').selectpicker('refresh');

this is to get it back

$('.selectpicker').prop('disabled', false);
$('.selectpicker').selectpicker('refresh');

You should refresh the selectpicker once the change is done

here is a working fiddle

Code to refresh the UI is

$('.selectpicker').selectpicker('refresh');

for more information refer the DOCS

One more mistake i have found is, to disable you have to use

attr('disabled',true)

not

attr('disabled')