[英]Disabling selectize dropdown when a checkbox is checked
I have implemented Selectize on my HTML form.我已经在我的 HTML 表单上实现了Selectize 。 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.我知道 Selectize 对象上有一个
disable
属性,但我不知道在单击复选框时如何使用它。
I have tried adding the disabled
class to the Selectize div
element but that does not work either.我曾尝试将
disabled
类添加到 Selectize div
元素,但这也不起作用。
Any help will be well appreciated.任何帮助将不胜感激。
Thanks谢谢
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.我想在这里添加一个额外的答案,因为虽然@tclark333 的答案是正确的,但它有点误导,因为第一行是 selectize 对象的实际初始化,而不是实际需要的答案。
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. selectize API 在您从 jQuery 对象访问底层元素上的 selectize 属性时公开,而不是作为 jQuery 本身的扩展。
Assuming the element that has been selectized's ID is "myDropDown":假设被选中的元素的 ID 是“myDropDown”:
//disable
$('#myDropDown')[0].selectize.disable();
//re-enable
$('#myDropDown')[0].selectize.enable();
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();
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在您可以使用此 css 自定义选择之后
select[readonly]{
pointer-events: none;
background-color: #e9ecef;
}
.selectize-input.items.full.has-options.has-items.locked {
background-color: #e9ecef;
}
Result:结果:
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();
});
/********/
}
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.