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.

Haggerty

Answer 1

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

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

Esperance

Answer 2

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.

Tifanie

I think reinitializing might no longer be necessary. See the official example for disabling a select2 control. – Sabra

Answer 3

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!

Quiteria

In IE9/IE10 the disable attribute doesn't work for multile select2. – Gallenz

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() – Quiteria

Answer 4

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

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

Trajan

Answer 5

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');

Whencesoever

Answer 6

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

Saleable

Answer 7

would you not require this:

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

same as this question

Mend

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. – Twana

Answer 8

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

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

Wellrounded

Answer 9

Just Use the trigger event

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

Cheesy

Thanks. Now I can finally finish this project from 2013. :D – Haggerty