Javascript Select2 - 从 js 使其成为只读（未禁用！）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41807096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 - make it readonly (not disabled!) from js
提问by Catalin
How can I dynamically make a select2 combobox read-only?
如何动态地将 select2 组合框设为只读？
Here's what I've tried so far:
这是我迄今为止尝试过的：
$('...').attr({'readonly': 'readonly'}).trigger('change.select2');
$('...').attr({'readonly': 'readonly'}).trigger('change');
$('...').select2().enable(false);
采纳答案by Cas Knook
See: http://select2.github.io/select2/
见：http: //select2.github.io/select2/
I did it with:
我是这样做的：
$("#modelname-fieldname").select2({disabled:readonly});
Where:
在哪里：
modelname-fieldnameis as in:$form -> field($modelname, "fieldname") -> widget(Select2::classname(), [ ... ]);readonlyis true, false or a stringreadonly
modelname-fieldname如下所示：$form -> field($modelname, "fieldname") -> widget(Select2::classname(), [ ... ]);readonly为真、假或字符串readonly
Optionally you can change the cursor when hovering over the select2field.
或者，您可以在将鼠标悬停在该select2字段上时更改光标。
回答by Ali Jamal
This is Solution for Latest select2(Tested With 4.0.7) using css only
这是最新select2（已测试4.0.7）的解决方案，使用css only
/*Select2 ReadOnly Start*/
select[readonly].select2-hidden-accessible + .select2-container {
pointer-events: none;
touch-action: none;
}
select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
background: #eee;
box-shadow: none;
}
select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
display: none;
}
/*Select2 ReadOnly End*/
回答by lafeber
Solution from Select2 - Issue #3387 - Readonly Support:
Select2 中的解决方案- 问题 #3387 - 只读支持：
select[readonly].select2 + .select2-container {
pointer-events: none;
touch-action: none;
.select2-selection {
background: #eee;
box-shadow: none;
}
.select2-selection__arrow,
.select2-selection__clear {
display: none;
}
}
Edit: for versions > 4.07- as commenters below correctly pointed out:
编辑：对于版本> 4.07- 正如下面的评论者正确指出的那样：
select[readonly].select2-hidden-accessible + .select2-container {
pointer-events: none;
touch-action: none;
.select2-selection {
background: #eee;
box-shadow: none;
}
.select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
display: none;
}
}
回答by Cinava
This works for me: .select2("readonly", true); .select2("readonly", false);
这对我有用： .select2("readonly", true); .select2("只读", false);
回答by rzbyn
I'm working with Select 4.0 and this works well for me
我正在使用 Select 4.0，这对我很有效
$('#select2-element').on('select2:select', () => {
$('#select2-element').data('select2').destroy();
$('#select2-element').attr('readonly', true);
});
