Select2 disable/enable specific option

Question

I have a list which is of type select2.

<select id="list" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<optgroup label="Types">
<option value="None">None</option>
<option value="1">One</option>
<option value="2">Two</option>
</optgroup>
</select>

I want to disable option which is having value=1 so I did like this

$("#list>optgroup>option[value='1']").prop('disabled',true);
   Result:// <option value="1" disabled>One</option>

It is working fine;but if i want to re-enable disabled option i tried below codes but still the select2 option is disabled.

$("#list>optgroup>option[value='1']").prop('disabled',false);
$("#list>optgroup>option[value='1']").removeProp('disabled');
  Result://   <option value="1">One</option>

but strange is disabled property of the option is removed. but the select2 option remains disabled.

Not getting how to resolve this. Need help.

Update: If I check DOM of select2 it is having this property even after removing disabled.

<li class="select2-results__option" id="select2-template-type-list-result-4qd3-merge" role="treeitem" aria-disabled="true">One</li>

if i make aria-disabled="false" it will enable. not able to get what is the cause.

Pellegrino

Have you tried calling .select2(…) on the element again after changing the disabled attribute? – Deliadelian

$("#list>optgroup>option[value='1']").prop('disabled',false); $("#list>optgroup>option[value='1']").removeProp('disabled'); $("#list").select2(); – Gareri

@Deliadelian the issue with the re-enable of option. disable function working properly. I tried calling select2(). it is working properly. But i am not able to get what is the issue in select2? – Pellegrino

Works fine for me by simply calling .select2 again after changing the disabled state of an option: jsfiddle.net/xoxd2u15 – Deliadelian

@Deliadelian Invoking select2 again works.Thanks. But for normal select no need to invoke any function.what could be the issue? – Pellegrino

Of course there is no need to invoke anything else for a “normal” select field, because that is a default HTML element that the browser renders directly. But select2 replaces that select field with custom HTML elements (and hides the original) – and apparently it does not “watch” the options of that original select element for changes in their disabled state constanstly after invocation, and so you have to call it once more after changing the state, so that it reads the current attribute values from the original element’s options … – Deliadelian

Ok, I added this as an answer. – Deliadelian

Has this been fixed in select2 v4.0 ? – Geochronology

Answer 1

Probably easiest way to achieve this, would be calling .select2(…) on the element again after changing the disabled attribute.

http://jsfiddle.net/xoxd2u15/

Since select2 replaces the original select field with custom HTML elements (and hides the original), and apparently does not “watch” the options of that original select element for changes in their disabled state constantly after invocation, you have to call it once more after changing the state, so that it reads the current attribute values from the original element’s options.

Deliadelian

This is a known bug in Select2 4.0.0. The disabled property is cached, but the selected (and other properties) are not. – Povertystricken

Hey @Kevin, thanks for the info. Glad to see you’re working on fixing this for future versions. – Deliadelian

This has been fixed: github.com/select2/select2/commit/… – Featherveined

As mentioned by Joel, that commit fixes select2 not obeying option disabled state. Upgrading to version 5.0.13 fixed it for me so that $('option').attr('disabled') and $('option').removeAttr('disabled') work as expected without having to reload select2 on the select. – Strengthen

Answer 2

For Disable Try this:

$("#list>optgroup>option[value='1']").attr('disabled','disabled');

To remove Disable Try this:

$("#list>optgroup>option[value='1']").removeAttr('disabled');

Turves

I did the same. It is still disabled. Please check my question once. – Pellegrino

Answer 3

This will work if u do not want to unbind and bind the select option

$('#list option[value="1"]').data().data.disabled = false;

Busoni

Answer 4

$("#list").find(':selected').attr('disabled','disabled');
$("#list").trigger('change');

See Official Doc

https://select2.org/programmatic-control/retrieving-selections

Pierian

Please provide a bit more context to your answer/explain it a bit, e.g.: What has changed since the questions was asked, the accepted answer given? – Reproof

With versionn 4.03, this is working as expected. Using jQuery, use the find to query select the desired option. You can "removeAttr" to remove the disabled attribute. I would suggest change the given url to select2.org/programmatic-control/add-select-clear-items – Areola

Answer 5

If you are plan to disable and enable select options with select2 class dynamically, you can use below as reference.

I have two select tags(with ids xaxis and yaxis) with same list of options and i want user not to select same option for this select tag.

function checkfieldvalue(value,select_id)
{   
  /* enable all options first */
  $('#xaxis option').prop('disabled',false); 
  $('#yaxis option').prop('disabled',false);
  if(select_id==0){
    $('#xaxis option[value="'+value+'"]').prop('disabled',true);      
  }else{
    $('#yaxis option[value="'+value+'"]').prop('disabled',true);      
  }
}

Intuitive

Answer 6

There are some strange instances when you need to remove both the prop (node property) and the attr (Document HTML Attribute). They are in fact not one in the same though jQuery tends to treat them that way.

So you would need to do

$("#list>optgroup>option[value='1']").removeAttr('disabled').removeProp('disabled');

This way it both removes the node property and the dom attribute.

That said you likely need to update the select2 instance which nobody here mentioned the right solution for.

$('#list').trigger('change.select2');

.trigger('change') would also work but has some side effects if other functionality is hooked into the change event. Further you can't use it inside an already hooked on('change') function.

Hine

Answer 7

Below line of code will disable all the options.

$('#list  option').prop('disabled',true);

This line will enable only option that is having value 1.

$('#list option[value="1"]').prop('disabled',false);

$('#list').select2();

Above is more simplified answer.

Camellia