選中復選框時禁用選擇下拉列表

Question

我已經在我的 HTML 表單上實現了Selectize 。 但是，只有單擊“啟用”復選框時，下拉列表才會變為活動狀態。 我知道 Selectize 對象上有一個disable屬性，但我不知道在單擊復選框時如何使用它。

我曾嘗試將disabled類添加到 Selectize div元素，但這也不起作用。
任何幫助將不勝感激。

謝謝

Answer 1

我想在這里添加一個額外的答案，因為雖然@tclark333 的答案是正確的，但它有點誤導，因為第一行是 selectize 對象的實際初始化，而不是實際需要的答案。

selectize API 在您從 jQuery 對象訪問底層元素上的 selectize 屬性時公開，而不是作為 jQuery 本身的擴展。

假設被選中的元素的 ID 是“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();
                    });

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