Question

selectpicker旁边有checkbox。我想如果复选框被选中，selectpicker将被启用，如果未选中，则selectpicker将被禁用。我写了这个不起作用（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

完成更改后，您应该刷新选择标记

这是一个有效的fiddle

刷新用户界面的代码是

$('.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

与淘汰赛中引导选择的其他实现相比，这里有一些改进。

它的作用是订阅可观察值的值，selectedOptions，选项和禁用绑定。

因此，如果在下面使用“ bootstrapSelect”的同一元素上使用“禁用”绑定，则它将添加禁用类或根据绑定到禁用绑定的可观察值将其删除。

ko.bindingHandlers.bootstrapSelect = new function () {
    this.after = ['options', 'value', 'selectedOptions'];

    this.init = function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var $e = $(element);

        var subscriptions = [];

        var doRefresh = function () {
            $e.selectpicker('refresh');
        };

        var addSubscription = function (bindingKey, callBack) {
            var targetObs = allBindings.get(bindingKey);

            if (targetObs && ko.isObservable(targetObs)) {
                subscriptions.push(targetObs.subscribe(callBack));
            }
        };

        addSubscription('disable', () => {
            $e.addClass('disabled');
            doRefresh();
        });        
        addSubscription('options', doRefresh);
        addSubscription('value', doRefresh);           // Single
        addSubscription('selectedOptions', doRefresh); // Multiple

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            while (subscriptions.length) {
                subscriptions.pop().dispose();
            }
        });        
    };

    this.update = function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var $e = $(element);        
    };
};
export default ko.bindingHandlers.bootstrapSelect;

这里有个例子：

<select class="form-control" data-live-search="true" data-bind="disable: readOnly, bootstrapSelect: { }, options: selectOptions, optionsText: 'name', optionsValue: 'value', value: userValue"></select>
<span class="validationMessage" style="" data-bind="visible: !userValue.isValid() && (userValue.isModified() || userValue.isValidating()), text: userValue.error()"></span>

在此示例中，我将一个可观察到的名为readOnly绑定到禁用绑定，并且可以在true和false之间进行切换。如果我为readOnly设置true，则disable绑定会向元素添加一个“ disabled”属性，该引导选择将忽略该属性。但是引导选择绑定中对“ readOnly”的预订将被触发，并导致其检查禁用绑定的值，然后添加或删除引导选择要遵守的类“ disabled”。

对options，value和selectedOptions的订阅还可以确保在Bootstrap select上调用刷新，以使用新选项或选定值更新gui。

Answer 4

这用于禁用。

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

这是要找回

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

Answer 5

我使用下面的方法禁用了选择器中的选择器。希望对你有用。

$('.selectpicker').selectpicker('refresh');
$("#yourSelect").prop("disabled", true);
$("button[data-id='yourSelect']").prop("disabled", true);
// You can customize the display of content inside the input this way
$("button[data-id='yourSelect'] .filter-option-inner-inner").text('No data available);

禁用选择标签后的我的图像

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

5 个答案: