How can I disable selected attribute from select2() dropdown Jquery?

Question

I know how to enable the selected attribute from dropdown; I can use this code :

$('select').select2();

but my problem is how to disable it ? thx Click Here

2

it is a JQuery plugin – Attila Naghi Jan 17 '14 at 13:24

score 60 · Answer 1 · edited Jul 24 '19 at 03:35

60

The right way for Select2 3.x is:

$('select').select2("enable", false)

This works fine.

edited Jul 24 '19 at 03:35

Kevin Brown-Silva

40,873
40
203
237

answered Oct 03 '14 at 11:05

user4105545

609
1
5
2

score 47 · Accepted Answer · edited Aug 24 '21 at 06:58

47

For those using Select2 4.x, you can disable an individual option by doing:

$('select option:selected').prop('disabled', true);

For those using Select2 4.x, you can disable the entire dropdown with:

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

edited Aug 24 '21 at 06:58

tobias47n9e

2,233
3
28
54

answered Jan 17 '14 at 13:23

robert

609
6
14

I edited my post, see the image. This method is not working. I think there is a specific function from select2 for this, but Im a newbie to this. – Attila Naghi Jan 17 '14 at 13:32
I tried this version to : $('select option:selected').attr('disabled','true'); – Attila Naghi Jan 17 '14 at 13:45
I'm a little confused, you want to disable the select element or an option of the select? If it is the select element try: $('select').select2().enable(false); – robert Jan 17 '14 at 13:46
it works for the firs time, but for the second times it disables all of the 2 dropdowns. Can I do something like this? $(' #subTasks select').select2().enable(false), where id ="subTasks" belongs to the second dropdown – Attila Naghi Jan 17 '14 at 13:59
$('#subTasks').select2().enable(false) => I want to write this, but it disables it completly even if I want to choose another value for Tasks,Subtask it is still disabled. I dont know if you understand me :D – Attila Naghi Jan 17 '14 at 14:06
In that case you have to control the disable/enable action depending on what you select in the in the Task select element. Remember that you can enable the Subtask again by doing this: $('#subTasks').select2().enable(true). – robert Jan 17 '14 at 14:13
this answer not work for me, in select2.js it gave me error "throw "query function not defined for Select2 " + opts.element.attr("id");" answer from user4105545 work fine – Alex Oct 17 '14 at 08:30
As of Select2 4.1, they've removed support for .enable: '$("select").prop("disabled", true); // instead of $("select").enable(false);' – Matt Feb 23 '18 at 09:37
Following this : https://github.com/select2/select2/issues/5309#issuecomment-405140337 I was doing $("select").select2().prop("disabled", false), which is WRONG. You have to enable on field directly : $("select").prop("disabled", false) or your Ajax option grabbing capabilities won't work – ZalemCitizen Feb 26 '20 at 10:36

score 17 · Answer 3 · edited Jul 24 '19 at 03:35

17

The below code also works fine for Select2 3.x

For Enable Select Box:

$('#foo').select2('enable');

For Disable Select Box:

$('#foo').select2('disable');

jsfiddle: http://jsfiddle.net/DcunN/

edited Jul 24 '19 at 03:35

Kevin Brown-Silva

40,873
40
203
237

answered Nov 06 '14 at 09:08

Anitha

365
5
14

2

To disable: it's `$('#foo').select2('enable', false);` in my case. – Yahya Jul 05 '18 at 00:12
1

`$('#foo').select2('disable');`does not work anymore – elki42 Aug 14 '18 at 09:16

score 9 · Answer 4 · edited Jul 24 '19 at 03:36

9

To disable the complete select2 box, that is no deletion of already selected values and no new insertion, use:

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

where id-select2 is the unique id of select2. you can also use any particular class if defined to address the dropdown.

edited Jul 24 '19 at 03:36

Kevin Brown-Silva

40,873
40
203
237

answered Jul 21 '16 at 00:06

proprius

502
9
20

score 8 · Answer 5 · answered Nov 14 '17 at 12:27

8

In selec2 site you can see options. There is "disabled" option for api. You can use like :

$('#foo').select2({
    disabled: true
});

answered Nov 14 '17 at 12:27

Atakan Savaş

185
1
3
10

score 5 · Answer 6 · answered Feb 23 '18 at 09:38

5

As of Select2 4.1, they've removed support for .enable

$("select").prop("disabled", true); // instead of $("select").enable(false);

From: https://select2.org/upgrading/migrating-from-35

answered Feb 23 '18 at 09:38

Matt

1,494
2
18
38

score 3 · Answer 7 · answered Nov 09 '17 at 16:39

As the question seems unclear, I'm sorry if this answer is not directly related to the original intent.

For those using Select2 version 4+ and according to official plugin documentation, .select2("enable")is not the way to go anymore for disabling the select box (not a single option of it). It will even be completely removed from version 4.1 onward.

Quoted directy from the documentation (see https://select2.org/upgrading/migrating-from-35#select2-enable):

Select2 will respect the disabled property of the underlying select element. In order to enable or disable Select2, you should call .prop('disabled', true/false) on the element. Support for the old methods will be completely removed in Select2 4.1.

So in the previous answer's example, it should be: $('select').prop(disabled,true);

score 3 · Answer 8 · edited Aug 24 '21 at 06:58

3

I'm disabling select2 with:

$('select').select2("enable",false);

And enabling it with

$('select').select2("enable");

edited Aug 24 '21 at 06:58

tobias47n9e

2,233
3
28
54

answered Mar 28 '18 at 07:09

Miftah Mizwar

3,722
2
13
20

score 3 · Answer 9 · answered Mar 28 '18 at 13:48

As per select2 documentation: Click Here

If you wants to disable select2 then use this approach:

$(".js-example-disabled").prop("disabled", true);

If you wants to enable a disabled select2 box use this approach:

$(".js-example-disabled").prop("disabled", false);

score 1 · Answer 10 · answered Oct 24 '16 at 04:55

1

$('select').select2('enable',false);

This works for me.

answered Oct 24 '16 at 04:55

weeraa

1,123
8
23
40

score 0 · Answer 11 · answered Feb 02 '17 at 14:20

0

I'm disable on value:

<option disabled="disabled">value</option>

answered Feb 02 '17 at 14:20

Alberto Cerqueira

1,339
14
18

score 0 · Answer 12 · answered Aug 21 '19 at 11:59

0

if you want to disable the values of the dropdown

$('select option:not(selected)').prop('disabled', true);

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

answered Aug 21 '19 at 11:59

Kavya Hanumantharaju

112
4

How can I disable selected attribute from select2() dropdown Jquery?

12 Answers12