Get Value of Disabled Option in Select Multiple Jquery

Question

I have a multiple select on my page, and I have an option disabled so that the user can't unselect them, but I can't work out how to get the value of the disabled option.

My code so far

// Get selected positions
var $selPositions = $('select#empPositions').val();

HTML

<select name="empPositions[]" id="empPositions" style="width: 370px;" multiple="" data-placeholder="Choose a Position" required="">
<option></option>
<optgroup label="Admin">
    <option disabled="">There are no positions assigned to Admin</option>
</optgroup>
<optgroup label="Information Technology">
    <option value="1" selected="" disabled="">IT Developer</option>
    <option value="2">IT Geeks</option>
</optgroup>

Note the disabled option changes based on other variables, but it only gives me selected non-disabled values. Can anyone let me know if this can be done and how?

I'm using Chosen, hence why the disabled option

Fiddle: http://jsfiddle.net/c5kn5w75/

I did find this article on the JQuery Bug Site which said

The long-standing logic in .val() ensures that we don't return disabled options in a select-multiple. The change just applies the same behavior for select-one now for consistency. You can get to the disabled option value through $("select").prop("selectedIndex") if you need it.

But that didn't work for me.

Aeroballistics

it would help if you posted your HTML too – Undershrub

I don't see an issue.. see this jsfiddle which is my interpretation of the issue: jsfiddle.net/t60w5ztx – Undershrub

@Skram it's a multiple select, that's what the issue is. It works if it's standard – Aeroballistics

I reproduced the problem: jsfiddle.net/barmar/t60w5ztx/3 – Extremely

please define "can't remove them" – Ansell

AFAIK setting disabled doesn't prevent a option from un-selecting – Ansell

@Ansell It does. Remember it's a multiple select – Aeroballistics

@dpDesignz: it doesn't, at least for me( jsfiddle.net/barmar/t60w5ztx/3 ) – Ansell

@Ansell oh sorry you're correct, it doesn't. I forgot I'm using the chosen plugin :) – Aeroballistics

You can't unselect it by clicking on it, but if you click on some other option it will unselect the original option – Extremely

This seems to be a jQuery (mis)feature. Raw Javascript includes the disabled option in .selectedOptions, but jQuery doesn't use that (probably for compatibility with old browsers). – Extremely

It appears to be a deliberate design decision. The code for .val() contains this comment: // Don't return options that are disabled or in a disabled optgroup – Extremely

Answer 1

DEMO

var opt = $('#empPositions option:selected').map(function(i,v) {
    return this.value;
}).get(); // result is array
alert( opt );

Please bear in mind that when you submit the form disabled options wont be submitted even if they are selected. If you're submitting via AJAX, then you can grab the values as shown above.

Also bear in mind that $('option[disabled]').val() will return the value of the first disabled option element and $('option[disabled]:selected').val() the value of the first selected disabled option.

If there's always just one selected disabled option element you can target it using:

 var opt = $('#empPositions option[disabled]:selected').val(); // result is string

Forjudge

Thanks! I've got a hidden input to handle that element :) – Aeroballistics

Answer 2

You can get the value of a disabled element by doing something like this:

$('option[disabled]').val();

Subordinate

Nope tried that and option:disabled and both return undefined. :/ – Aeroballistics

Missing ] character – Extremely

@bencripps Oh right, yes I put that back in when testing anyway :) – Aeroballistics

Answer 3

//==================================
// Option-1:
//==================================

// Get Disabled Options
var disabled_options = $('#selectboxID option[disabled]');

// Get Disabled Ids
var disabled_options_ids = disabled_options.map(function(i,v) { 
                                return this.value;
                           }).get();


//==================================
// Option-2:
//==================================

// Get Disabled options Ids Using SelectBoxID
var disabled_options_ids= $('#selectboxID option[disabled]').map(function(i,v) {
                               return this.value;
                           }).get();

Beisel