Как включить/отключить флажок selectpicker bootstrap по ickeck

Есть selectpicker рядом с checkbox. Я хочу, если флажок установлен, selectpicker будет включен, если он не установлен, selectpicker будет отключен. Я написал это, которое не работало (Вот скрипка):

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

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

Ответ 1

Вы должны обновить selectpicker после завершения изменения.

здесь работает fiddle

Код для обновления пользовательского интерфейса

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

для получения дополнительной информации см. DOCS

Еще одна ошибка, которую я нашел, чтобы отключить, вы должны использовать

attr('disabled',true)

not

attr('disabled')

Ответ 2

Если ваш выборщик имеет больше, чем несколько вариантов, текущий принятый ответ невероятно медленный. (может вызвать зависание около половины секунды, что слишком долго, чтобы просто отключить что-то.)

Это сработало для меня:

Отключить:

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

Включить:

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

У этого также есть дополнительный бонус, фактически показывающий, что значение выбора было, когда оно было отключено. (это поведение полей выбора)

Я очень удивлен, что официальная документация предлагает использовать refresh только для ее отключения, это слишком долго.