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

Fairleigh

it is a JQuery plugin – Fairleigh

Answer 1

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

Portable

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

I tried this version to : $('select option:selected').attr('disabled','true'); – Fairleigh

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); – Portable

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 – Fairleigh

$('#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 – Fairleigh

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). – Portable

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 – Norge

As of Select2 4.1, they've removed support for .enable: '$("select").prop("disabled", true); // instead of $("select").enable(false);' – Equitant

Following this : 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 – Fresher

Answer 2

The right way for Select2 3.x is:

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

This works fine.

Ananna

Answer 3

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/

Inbound

To disable: it's $('#foo').select2('enable', false); in my case. – Kiva

$('#foo').select2('disable');does not work anymore – Merrileemerrili

Answer 4

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.

Abbacy

Answer 5

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

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

Maquette

Answer 6

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

Equitant

Answer 7

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

Stallings

Answer 8

I'm disabling select2 with:

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

And enabling it with

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

Cumber

Answer 9

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

Punctilious

Answer 10

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

This works for me.

Rearward

Answer 11

I'm disable on value:

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

Curzon

Answer 12

if you want to disable the values of the dropdown

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

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

Claudetteclaudia