Why doesn't disable attribute work on Bootstrap-select?

Question

I want to style my website forms, inputs and selects. I used Bootstrap for the inputs and Bootstrap-select for selects and iCheck for checkboxes. The problem is that iCheck does not work correctly with Bootstrap-select.

Here is jsFiddle test: http://jsfiddle.net/36Xpf/

Now, try to check the iCheck checkbox, the select of bootstrap-select will not be disabled. Then check the standard square checkbox, the select of bootstrap will be disabled.

I get the attribute disalbled to select if a checkbox is checked usign jQuery .change():

$('#checkbox1').change(function(){
  if (this.checked) {
    $('.selectpicker').attr('disabled', false);
  } else {
    $('.selectpicker').attr('disabled', true);
  }                   
});

What did I do wrong? Why the disabled attribute doesn't work on bootstrap select?
Any help is appreciated! Thank you!

Answer 1

It's a plugin, not a regular checkbox, you have to listen for events that it actually supports :

$('#checkbox1').on('ifChanged', function(){
    $('.selectpicker').attr('disabled', this.checked).selectpicker('refresh');
}).iCheck({
    checkboxClass: 'icheckbox_flat-red',
    radioClass: 'iradio_flat-red' 
});

FIDDLE