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