Отключение выбора раскрывающегося списка, когда установлен флажок

Question

Я реализовал выборку в моей HTML-форме. Однако раскрывающийся список становится активным только при нажатии флажка "включить". Я знаю, что на объекте selectize есть свойство disable, но я не знаю, как его использовать, когда установлен флажок.

Я попытался добавить отключенный класс к элементу selectize div, но это тоже не работает. Любая помощь будет оценена по достоинству.

Спасибо

Answer 1

Я хотел добавить дополнительный ответ здесь, потому что, хотя ответ @tclark333 является правильным, он немного вводит в заблуждение, поскольку первая строка - это фактическая инициализация объекта выбора, а не фактически то, что нужно для ответа.

API selectize открывается при доступе к свойству selectize базового элемента из объекта jQuery, а не как расширение самого jQuery.

Предполагая, что элемент, который был выбран идентификатор, является "myDropDown":

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

Answer 2

Это немного странно, как вы должны это настроить. Вот что работает для меня.

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

Answer 3

Этот метод помещает автоматически заблокированный класс для каждого выбора, если родительский элемент доступен только для чтения (используйте свою собственную логику, чтобы выбрать только для чтения)

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

после того, как вы можете настроить выбор с помощью этого css

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

Результат:

пример с бутстрапом

Answer 4

function generateCircle(id , jPath){
        var formId =$("#"+id).closest(".data_details_accord").find("form");
        var select = formId.find("select");
        /*disable select initially*/ 
        select.each(function(){
            var thisSelect = $(this).selectize();
            thisSelectDisable = thisSelect[0].selectize;
            thisSelectDisable.disable();
        });

        /***********/ 

        $.ajax({
            url: jPath,
            data:formVlaz,
            success: function(result){

            },error: function (xhr , status, eror) {
            },complete: function (xhr) {

                /*enable select when ajax complete*/ 
                    select.each(function(){
                        var thisSelect = $(this).selectize();
                        thisSelectDisable = thisSelect[0].selectize;
                        thisSelectDisable.enable();
                    });

                /********/ 
            }
        });
    };