CODEWITHSUNDEEP
jqueryselectjquery-select2
Madhukar Hebbar
Madhukar Hebbar

Reputation: 3183

Select2 disable/enable specific option

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.

Upvotes: 27

Views: 111988

Answers (7)

devdev
devdev

Reputation: 21

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

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

Upvotes: 2

Yuvraj Hinger
Yuvraj Hinger

Reputation: 368

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

Upvotes: 1

Farjan
Farjan

Reputation: 154

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

See Official Doc

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

Upvotes: 1

naim shaikh
naim shaikh

Reputation: 1111

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.

Upvotes: 0

Daniel Iser
Daniel Iser

Reputation: 441

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.

Upvotes: 0

C3roe
C3roe

Reputation: 96339

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.

Upvotes: 37

answer99
answer99

Reputation: 251

For Disable Try this:

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

To remove Disable Try this:

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

Upvotes: 4

Related Questions