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

在

复选框旁边有
选择器
。我想如果选中复选框，则selectpicker将启用，如果未选中，则selectpicker将禁用。
我写了这篇不起作用的文章（）：

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

这是一张工作票

刷新UI的代码是

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

有关更多信息，请参阅

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

attr('disabled',true)

不是

如果您的选择选择器不止有几个选项，那么当前接受的答案将非常慢。（可能会导致半秒钟左右的挂起，这太长了，无法使某些内容禁用。）

这对我很有用：

禁用：

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

启用：

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

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

我有点惊讶官方文档建议使用
refresh
只是为了禁用它，这需要花费太长时间。
与其他bootstrap select-in-knockout实现相比，这里有一个小小的改进

这样做的目的是订阅值中的可观察项、selectedOptions、options和disable绑定

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

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的可观察绑定到disable绑定，我可以在true和false之间切换它。如果我将readOnly设置为true，那么禁用绑定会向元素添加一个“disabled”属性，引导选择会忽略该属性。但是在引导选择绑定中对“readOnly”的订阅将被触发，并使其检查禁用绑定的值，然后添加或删除引导选择所关注的类“disabled”

对选项、值和所选选项的订阅还确保在引导选择时调用刷新，以使用新选项或所选值更新gui。
此选项用于禁用

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

这是为了找回它

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

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

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

禁用“选择”标记后的我的图像
还有一个简单的启用/禁用示例。启用/禁用示例现在处于启用状态。我禁用了一个selectbox（使用
selectpicker
类），我使用javascript启用它，但它不起作用（没有
selecpicker
类，它是）。我只需要像您一样刷新
选择器
。谢谢$（.selectpicker”）.next（“按钮”）.addClass（“禁用”）；
$('.selectpicker').prop('disabled', false);
$('.selectpicker').selectpicker('refresh');

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