select2 will not disable or clear

Question

I have a secondary select slaved to a primary select (pick a store, then pick a department - identical to pick a country, then pick a state).

I absolutely cannot get select2's ('enable',false) and ('data', null) methods to work, no matter how much other code I tear out.

<select id="stores">
  <option value="foo">foo</option>
</select>
<select id="depts">
  <option value="bar">bar</option>
</select>

// ...some logic that selects a store, then fetches that store's depts ...

$('#depts').select2('enable',false);// does not disable control
$('#depts').select2('data',null); // does not clear control

So I'm forced to do this:

$('select#depts').empty(); // clears HTML element
$('#depts').select2(); // re-enhances select w/ select2
$('#depts').select2('disable',true); // disables

It behaves itself in jsfiddle, so I can't even post an example and request help. I'm just ... stumped.

score 28 · Answer 1 · answered Nov 10 '14 at 11:33

28

// to disable
$('#statusSelect').select2('disable');

//to enable
$('#statusSelect').select2('enable');

answered Nov 10 '14 at 11:33

prashant

2,181
2
22
37

score 12 · Answer 2 · answered Nov 25 '13 at 09:34

This works for me in all browsers:

$('#statusSelect').select2('destroy');
$('#statusSelect').prop('disabled', true);
$('#statusSelect').select2();

That gives you a disabled select2 input.

To re-enabled simply:

$('#statusSelect').select2('destroy');
$('#statusSelect').prop('disabled', false);
$('#statusSelect').select2();

The down side is that this causes your select box to change appearance for a split second when select2 is destroyed and reapplied.

Also, "readonly" and "disabled" are not supported in older versions of select2.

I think reinitializing might no longer be necessary. See the official example for [disabling a select2 control](https://select2.org/appearance#disabling-a-select2-control). — showdev, Nov 22 '21 at 05:03

score 5 · Answer 3 · answered Nov 05 '13 at 03:16

5

You're probably experiencing select2 bug 1104. Unfortunately it's still a problem in IE8-10, but it's not select2's fault. The problem is that IE doesn't trigger the propertychange event when an element is disabled, and also doesn't implement the MutationObserver functionality that other browsers use. Luckily, there's a tiny jQuery plugin that I wrote that will allow the propertychange event to be fired when an element is disabled. You can find it here.

$('#originalSelect').fireOnDisable().select2();
$('#originalSelect').prop('disabled', true);

should now work in IE8-10. If you need to support IE6-7, you're on your own!

answered Nov 05 '13 at 03:16

cmcnulty

411
4
12

In IE9/IE10 the disable attribute doesn't work for multile select2. – Misi Jan 09 '14 at 14:25
IE8-10 don't have any *attribute* watcher, only property watcher - so you might be experiencing a problem where you're setting the attribute and not the property - in my tests it works fine using jquery to .prop(), but not .attr() – cmcnulty Jan 09 '14 at 16:01

score 3 · Answer 4 · answered Jul 20 '16 at 22:19

3

If you have unique id for select2 dropdown box, using that id,

$("#id-select2").attr("disabled", true);

answered Jul 20 '16 at 22:19

proprius

502
9
20

score 3 · Answer 5 · edited Apr 07 '18 at 11:30

3

This code should work in all browsers (select2 v4.0.4):

To disable:

$('select').prop('disabled', true).trigger('change');

To enable:

$('select').prop('disabled', false).trigger('change');

edited Apr 07 '18 at 11:30

GabMic

1,422
1
20
37

answered Apr 07 '18 at 09:36

wp-mario.ru

798
7
12

score 1 · Answer 6 · answered Feb 04 '16 at 17:25

For IE you have to re initialize select2 after enable/disable

// change action disable
$('.custom-select').select2()
.on("change", function(e) {
   $('.custom-select').prop("disabled", true).select2(); //call select2
})

// disable alternative
 $('.custom-select').prop("disabled", true).select2(); //call select2

score 0 · Answer 7 · edited May 23 '17 at 12:26

0

would you not require this:

$('#depts').prop('disabled', false);

same as this question

edited May 23 '17 at 12:26

Community

1
1

answered Jul 16 '13 at 15:40

Liam Sorsby

2,912
3
28
51

This question is not the same as the one you linked since it uses select2 plugin, it is not a simple select to be disabled. – Guilherme David da Costa Nov 28 '13 at 20:15

score 0 · Answer 8 · answered Mar 22 '17 at 16:05

0

If anyone is trying to do it in .net server code:

this.mySelect2elementID.Attributes.Add("disabled", "true");

answered Mar 22 '17 at 16:05

Jorge

1,178
2
13
33

score 0 · Answer 9 · answered May 29 '23 at 07:23

0

Just Use the trigger event

$('#depts').val('').trigger('change');

answered May 29 '23 at 07:23

Nazmul Hoque

761
9
9

Thanks. Now I can finally finish this project from 2013. :D – DaveC426913 May 30 '23 at 13:41

select2 will not disable or clear

9 Answers9