Select2 - make it readonly (not disabled!) from js

Question

How can I dynamically make a select2 combobox read-only?

Here's what I've tried so far:

$('...').attr({'readonly': 'readonly'}).trigger('change.select2'); $('...').attr({'readonly': 'readonly'}).trigger('change'); $('...').select2().enable(false); 

Answer 1

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

Answer 2

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 string readonly

Optionally you can change the cursor when hovering over the select2 field.