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.

I don't see an issue.. see this jsfiddle which is my interpretation of the issue: http://jsfiddle.net/t60w5ztx/ — Mark Silverberg, Sep 09 '14 at 00:15
@Skram it's a `multiple` select, that's what the issue is. It works if it's standard — dpDesignz, Sep 09 '14 at 00:16
I reproduced the problem: http://jsfiddle.net/barmar/t60w5ztx/3/ — Barmar, Sep 09 '14 at 00:17
AFAIK setting disabled doesn't prevent a option from un-selecting — Dr.Molle, Sep 09 '14 at 00:23
@dpDesignz: it doesn't, at least for me( http://jsfiddle.net/barmar/t60w5ztx/3/ ) — Dr.Molle, Sep 09 '14 at 00:31
@Dr.Molle oh sorry you're correct, it doesn't. I forgot I'm using the chosen plugin :) — dpDesignz, Sep 09 '14 at 00:32
You can't unselect it by clicking on it, but if you click on some other option it will unselect the original option — Barmar, Sep 09 '14 at 00:32
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). — Barmar, Sep 09 '14 at 00:34
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_ — Barmar, Sep 09 '14 at 00:35

PeterKA · Accepted Answer · 2014-09-09T00:44:20.387

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

Thanks! I've got a hidden input to handle that element :) – dpDesignz Sep 09 '14 at 00:40 — dpDesignz, Sep 09 '14 at 00:40

nfen · Answer 2 · 2014-09-09T02:17:03.087

0

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

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

edited Sep 09 '14 at 02:17

answered Sep 09 '14 at 00:24

nfen

1
1

Nope tried that and `option:disabled` and both return undefined. :/ – dpDesignz Sep 09 '14 at 00:25
Missing `]` character – Barmar Sep 09 '14 at 00:31
@bencripps Oh right, yes I put that back in when testing anyway :) – dpDesignz Sep 09 '14 at 00:32

score 0 · Answer 3 · answered Jul 07 '20 at 07:22

//==================================
// 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();

Get Value of Disabled Option in Select Multiple Jquery

3 Answers3