Question

我在html表单上实现了selectize。但是，只有单击“启用”复选框时，下拉列表才会变为活动状态。我知道选择对象上有一个禁用属性，但是当单击该复选框时我不知道如何使用它。

我尝试将禁用的类添加到selectize div元素，但这也不起作用。任何帮助将不胜感激。

谢谢

Answer 1

我想在这里添加一个额外的答案，因为虽然@ tclark333的答案是正确的，但它有点误导，因为第一行是选择对象的实际初始化，而不是实际上是什么＆＃39;需要答案。

当您从jQuery对象访问底层元素的selectize属性而不是jQuery本身的扩展时，会公开选择API。

假设已被选中的元素的ID是＆＃34; myDropDown＆＃34;：

//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

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();
                    });

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

Answer 4

如果父级是只读的，则此方法将自动锁定的类放置到每个selectize中（使用您自己的逻辑将select置于只读状态）

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

结果：

example with bootstrap

选中复选框后禁用选择性下拉列表

4 个答案: