How to enable/disable bootstrap selectpicker by ickeck checkbox

Question

There are selectpicker beside checkbox. I want if checkbox is checked, selectpicker will be enable, if unchecked, selectpicker will be disable. I wrote this which was not working ( Here is the fiddle ):

$('.checkBox').on('ifChecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').removeAttr('disabled');

});
$('.checkBox').on('ifUnchecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').attr('disabled');
});

Answer 1

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

Answer 2

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.