选中复选框时禁用选择下拉菜单答案

【问题标题】：Disabling selectize dropdown when a checkbox is checked选中复选框时禁用选择下拉菜单
【发布时间】：2015-01-31 03:28:24
【问题描述】：

我在我的 HTML 表单上实现了Selectize。但是，只有在单击“启用”复选框时，下拉菜单才会变为活动状态。我知道 Selectize 对象上有一个 disable 属性，但我不知道在单击 checkbox 时如何使用它。

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

谢谢

【问题讨论】：

标签： javascript jquery selectize.js

【解决方案1】：

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

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

假设被选中元素的ID为“myDropDown”：

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

【讨论】：

【解决方案2】：

您必须如何设置它有点奇怪。这对我有用。

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

【讨论】：

【解决方案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;
}

结果：

example with bootstrap

【讨论】：

【解决方案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();
                    });

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

【讨论】：