How to enable/disable bootstrap selectpicker by ickeck checkbox

Question

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

$('.checkBox').on('ifChecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').removeAttr('disabled');

});
$('.checkBox').on('ifUnchecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').attr('disabled');
});

score 57 · Accepted Answer · answered Dec 05 '14 at 13:58

57

You should refresh the selectpicker once the change is done

here is a working fiddle

Code to refresh the UI is

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

for more information refer the DOCS

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

attr('disabled',true)

not

attr('disabled')

answered Dec 05 '14 at 13:58

Cerlin

6,327
1
18
25

There's also a simple enable/disable example [in the docs](http://silviomoreto.github.io/bootstrap-select/methods/#selectpickerrefresh). – Leith Apr 04 '17 at 02:19
Enable/disable example is now at https://developer.snapappointments.com/bootstrap-select/methods/#selectpickerrefresh – Patrick McDonald May 19 '20 at 10:01
I had a selectbox disabled (with `selectpicker` class), and I was enabling it using javascript, but it wasn't working (without `selecpicker` class, it was). All I needed was to refresh the `selectpicker` like you did. Thanks! – Meet Sinojia Nov 27 '20 at 12:33

score 9 · Answer 2 · answered Oct 30 '17 at 21:15

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)

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

$(".selectpicker").next("button").addClass("disabled"); – Juan R Apr 30 '21 at 00:50 — Juan R, Apr 30 '21 at 00:50

score 2 · Answer 3 · edited Oct 22 '20 at 08:37

2

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

edited Oct 22 '20 at 08:37

Renato Damas

7,806
4
23
35

answered Mar 10 '20 at 08:01

score 0 · Answer 4 · answered Feb 05 '20 at 19:25

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.

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.

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.

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.

score 0 · Answer 5 · answered Mar 24 '21 at 07:53

I used the way below to disable the selector in the selectpicker. Hope it useful for you.

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

My image after disabling the select tag

How to enable/disable bootstrap selectpicker by ickeck checkbox

5 Answers5

Linked