jQuery 如何通过 ickeck 复选框启用/禁用引导选择器

How to enable/disable bootstrap selectpicker by ickeck checkbox

提问by user1896653

There are selectpickerbeside 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):

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

回答by Cerlin

You should refresh the selectpicker once the change is done

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

here is a working fiddle

这是一个工作小提琴

Code to refresh the UI is

刷新 UI 的代码是

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

for more information refer the DOCS

有关更多信息，请参阅DOCS

One more mistake i have found is, to disable you have to use

我发现的另一个错误是，要禁用您必须使用

attr('disabled',true)

not

不是

attr('disabled')

回答by Skeets

If your select picker has more than just a few options, the current accepted answer is incredibly slow. (can cause a hang around half a second, which is way too long to just make something disabled.)

如果您的选择器有多个选项，则当前接受的答案非常慢。（可能会导致半秒左右的挂起，这太长了，无法禁用某些功能。）

This worked for me:

这对我有用：

Disable:

禁用：

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

Enable:

使能够：

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

This also has the added bonus of actually showing what the value of the select was when it was disabled. (which is the behavior of select boxes)

这还有一个额外的好处，即实际显示 select 被禁用时的值。（这是选择框的行为）

I'm kind of surprised the official documentation suggests to use refreshjust to disable it, it takes way too long.

我有点惊讶官方文档建议使用refresh它来禁用它，这需要太长时间。

回答by Ryan Mann

Here's a slight improvement over other implementations of bootstrap select in knockout.

这是在淘汰赛中与引导选择的其他实现相比略有改进的地方。

What this does is subscribe to observables in value, selectedOptions, options, and disable bindings.

这样做是在 value、selectedOptions、options 和 disable 绑定中订阅 observable。

So if you use the "disable" binding on the same element where you user "bootstrapSelect" below, then it will add the disabled class or remove it based on the value of the observable you bind to the disable binding.

因此，如果您在下面使用“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;

Heres an example:

这是一个例子：

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

In this example i have an observable called readOnly bound to the disable binding and I can toggle it between true and false. If I set true for readOnly then the disable binding adds a "disabled" attribute to the element, which bootstrap select ignores. But the subscription to "readOnly" in the bootstrap select binding will be fired and cause it to check the value of the disable binding and then add or remove the class "disabled" which bootstrap select respects.

在这个例子中，我有一个名为 readOnly 的 observable 绑定到禁用绑定，我可以在 true 和 false 之间切换它。如果我将 readOnly 设置为 true，则禁用绑定会向元素添加一个“禁用”属性，引导选择忽略该属性。但是在引导选择绑定中对“readOnly”的订阅将被触发并导致它检查禁用绑定的值，然后添加或删除引导选择尊重的“禁用”类。

The subscription to options, value, and selectedOptions also ensures the refresh is called on Bootstrap select to update the gui with new options or selected values.

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

回答by Furkan

this is used to make disabled.

这是用来禁用的。

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

this is to get it back

这是为了取回它

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