如何通过ickeck复选框启用/禁用bootstrap selectpicker

Question

还有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');
});

Answer 1

更改完成后,您应该刷新selectpicker

这是一个工作小提琴

用于刷新UI的代码是

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

有关更多信息,请参阅DOCS

我发现的另一个错误是禁用你必须使用

attr('disabled',true)

不

attr('disabled')

Answer 2

如果您选择的选择器有多个选项，那么当前接受的答案将非常缓慢。（可能会导致挂起半秒，这太长了，无法使某些功能失效。）

这为我工作：

禁用：

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

启用：

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

这还具有额外的好处，即可以显示禁用时选择的值。（这是选择框的行为）

我对官方文档建议refresh仅禁用它感到惊讶，这花费了太长时间。

Answer 3

这用于禁用。

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

这是为了把它拿回来

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