25

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

5 回答 5

62

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

这是一个工作小提琴

刷新 UI 的代码是

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

有关更多信息，请参阅DOCS

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

attr('disabled',true)

不是

attr('disabled')
于 2014-12-05T13:58:26.230 回答
9

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

这对我有用：

禁用：

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

使能够：

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

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

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

于 2017-10-30T21:15:10.653 回答
4

这用于禁用。

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

这是为了取回它

$('.selectpicker').prop('disabled', false);
$('.selectpicker').selectpicker('refresh');
于 2020-03-10T08:01:57.297 回答
0

这是在淘汰赛中对引导选择的其他实现的轻微改进。

它的作用是订阅值、selectedOptions、选项和禁用绑定中的 observables。

因此，如果您在下面使用“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 的 observable 绑定到禁用绑定，我可以在真假之间切换它。如果我为 readOnly 设置 true ，那么禁用绑定会向元素添加一个“禁用”属性，引导程序选择会忽略该属性。但是在引导选择绑定中对“只读”的订阅将被触发，并导致它检查禁用绑定的值，然后添加或删除引导选择尊重的类“禁用”。

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

于 2020-02-05T19:25:01.080 回答
0

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

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

禁用选择标签后我的图像 在此处输入图像描述

于 2021-03-24T07:53:19.633 回答