JQuery Select2 cannot enable after disable

[conangithub]

I am using Select2 version 4.0.5.

My Code

php

<select class="form-control customer" disabled>
    <option value=""></option>
    @foreach($customer as $c)
        <option value="{{ $c->id }}">{{ $c->user->name }}</option>
    @endforeach
</select>

jquery

$(function() {
    $('.customer').select2({
        placeholder: "Choose Customer"
    });
    $('.customer').val(0).trigger('change.select2');
});

$('.action_add').on('click', function() {
    $('.customer').select2('enable', false);
});

$('.action_delete').on('click', function() {
    if(IsEmptyRow()) {
        alert('test');
        $('.customer').select2('enable', true);
    }
});

Explanation

Enable false is working to make the select2 disable. When I want to enable it back, using enable true cannot make it enable back. The alert test inside the if code block is working.

System Details

Mac OS 10.13.5
PHP 7.0.9
Laravel 5.5

[DanielZambranoC]

same here.

[vmcruz]

Please refer to this stackoverflow answer: https://stackoverflow.com/questions/21187050/how-can-i-disable-selected-attribute-from-select2-dropdown-jquery

In this case, the correct usage should be:

$('.customer').select2().prop("disabled", false);

or

$('.customer').select2().prop("disabled", true);

according to your needs.

If this solves the issue, please close it.

[conangithub]

The $('.customer').select2().prop("disabled", true); still cannot enable it back.

[webzorg]

Same problem here

[afbora]

I'm getting this issue on Select2 4.0.5. I couldnt change input disabled prop after first enable/disable action,

[dojo-coder]

Stumbled upon the same issue, the fix that works for me is sending the value as an array:
$('.customer').select2('enable', [false])
or
$('.customer').select2('enable', [true])

[kevin-brown]

For someone who is running into this issue, can you create an example of where this fails in a jsbin? That would make it easier to confirm and later debug the issue.

[J-Nagle]

I had this issue too using the latest version (4.0.7). Disabling options with the following jQuery (on version 2.2.4) did not cause the widget to update (whereas, it did in 4.0.3, but could not be re-enabled).

$(this).find("select :not(option:selected)").prop("disabled",true);

Calling the Select2 initialiser again worked around both issues.

$(this).find("select").select2();

[dojo-coder]

I've setup a jsfiddle with the working array values
https://jsfiddle.net/huya0swb/2/

This is for the latest select2 version 4.0.7

[kevin-brown]

Here's a jsfiddle showing that prop('disabled', true/false) works as expected. This is the recommended way to do this.

https://jsfiddle.net/3f1bs2j7/

select2('enable') and select2('disable') are explicitly deprecated and are not recommended. I've gone and updated that Stack Overflow answer to reflect this change in the new version.

[hariharan-baskaran]

Hello @kevin-brown ,
The dropdown gets disabled , but once the dropdown is disabled, on clicking of space or enter keys , the drop down opens and we can change the values . Is there any other way we could disable it ? Have been trying out all the options here and have also looked into stackoverflow .

[kevin-brown]

I cannot reproduce the issue described here in this bug report. I'm totally willing to believe that this used to be an issue, but if nobody can reproduce it on the latest version then I have to assume it has been fixed.

The dropdown gets disabled , but once the dropdown is disabled, on clicking of space or enter keys , the drop down opens and we can change the values

That sounds like a very different issue, one that is being tracked under #4695.

[zeabdelkhalek]

same issue here

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[binodtechversant]

This issue still exists

[kevin-brown]

I cannot reproduce the issue described here in this bug report. I'm totally willing to believe that this used to be an issue, but if nobody can reproduce it on the latest version then I have to assume it has been fixed.

We need a jsbin where this can be reproduced.

[J-Nagle]

Here is a JSFiddle demonstrating that when developers attempt to disable an option within a select menu, Select2 fails, as described in my original comment. The reason why anyone would use this method is because otherwise the browser would not submit the value of the select element, which is undesirable.

https://jsfiddle.net/3sdbwk5t/3/

To demonstrate the original bug, here is a case that shows when developers are able to successfully disable an option, they cannot reenable them.

https://jsfiddle.net/204qe6nj/

As I am using the workaround I posted, this issue no longer affects me. However, the issue is still valid.

[kevin-brown]

Still looking for a jsfiddle/jsbin which reproduces the issue where enabling/disabling the Select2 element fails. The issue with individual options within the <select> was fixed in Select2 4.0.8 (ref #5560).

---

Here are updated jsfiddles with just the Select2 JS version updated to the latest.

Here is a JSFiddle demonstrating that when developers attempt to disable an option within a select menu, Select2 fails, as described in my original comment.

https://jsfiddle.net/8dshba6j/

To demonstrate the original bug, here is a case that shows when developers are able to successfully disable an option, they cannot reenable them.

https://jsfiddle.net/x9tgjyLz/1/

[ZalemCitizen]

Please refer to this stackoverflow answer: https://stackoverflow.com/questions/21187050/how-can-i-disable-selected-attribute-from-select2-dropdown-jquery

In this case, the correct usage should be:

$('.customer').select2().prop("disabled", false);

or

$('.customer').select2().prop("disabled", true);

according to your needs.

If this solves the issue, please close it.

This happens to be wrong, you have to .prop("disabled", false) on select field directly or ajax options grabbing capabilities won't work

[Sala]

Stumbled upon the same issue, the fix that works for me is sending the value as an array: $('.customer').select2('enable', [false]) or $('.customer').select2('enable', [true])

this worked for me.