Select2 - make it readonly (not disabled!) from js
See: http://select2.github.io/select2/
I did it with:
$("#modelname-fieldname").select2({disabled:'readonly'});
Where:
modelname-fieldname
is as in:$form -> field($modelname, "fieldname") -> widget(Select2::classname(), [ ... ]);
readonly
is true, false or a stringreadonly
Optionally you can change the cursor when hovering over the select2
field.
This works for me:
.select2("readonly", true);
.select2("readonly", false);
This is Solution for Latest select2
(Tested With 4.0.7
) using 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*/
Solution from Select2 - Issue #3387 - Readonly Support:
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:
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;
}
}