Disabling selectize dropdown when a checkbox is checked

Question

I have implemented Selectize on my HTML form. However a dropdown only becomes active when the "enable" checkbox is clicked. I know there is a disable property on the Selectize object but I dont know how to use it when the checkbox is clicked.

I have tried adding the disabled class to the Selectize div element but that does not work either.
Any help will be well appreciated.

Thanks

Answer 1

I wanted to add an additional answer here because although @tclark333's answer is correct, it's a bit misleading since the first line is the actual initialization of the selectize object, and not actually what's needed for the answer.

The selectize API is exposed when you access the selectize property on the underlying element from a jQuery object and not as an extension to jQuery itself.

Assuming the element that has been selectized's ID is "myDropDown":

//disable
$('#myDropDown')[0].selectize.disable();
//re-enable
$('#myDropDown')[0].selectize.enable(); 

Answer 2

It's a little weird how you have to set it up. Here's what works for me.

var select = $("#YourDropDownId").selectize();
var selectize = select[0].selectize;
selectize.disable();

Answer 3

This method put automatic locked class to each selectize if parent is readonly (use your own logic to put readonly on select)

$('.custom-select-2').each(function(){
    $(this).selectize({
         create: true,
         sortField: {
             field: 'text',
             direction: 'desc'
         }
    });
    if ($(this).is('[readonly]')) {
        $(this)[0].selectize.lock();
    }
})

after you can customize the select with this css

select[readonly]{
    pointer-events: none;
    background-color: #e9ecef;
}
.selectize-input.items.full.has-options.has-items.locked {
    background-color: #e9ecef;
}

Result:

example with bootstrap