Make all options enabled in select element

Question

I have a dropdown with a few disabled options. And I want make all options enabled.

This is html:

<select id="selectId">
    <option value="JavaScript" disabled="">JavaScript</option>
    <option value="Angular">Angular</option>
    <option value="Backbone" disabled="">Backbone</option>
</select>

JavaScript:

var select = $("#selectId");
select.find("option").each(function(index, item) {
  item.attr('disabled',false);
});

But I get an error: TypeError: item.attr is not a function. What's wrong here?

Use `$(this).attr('disabled',false);` in loop or just ` $("#selectId option").removeAttr("disabled");` without any loop! — Prashant Shirke, Jun 15 '17 at 09:53
@PrashantShirke Yes, it's working and also $(item).attr('disabled',false); Just curious, why my initial version is not working? — user2598794, Jun 15 '17 at 09:59
`attr` is jquery method so works only on jquery objects. `item` in `.each` is DOM element. — Prashant Shirke, Jun 15 '17 at 10:00
Possible duplicate of [Remove disabled attribute using JQuery?](https://stackoverflow.com/questions/13626517/remove-disabled-attribute-using-jquery) — Liam, Jun 15 '17 at 10:13

Liam · Accepted Answer · 2020-06-01T07:11:21.733

6

The correct way to alter properties (disabaled is a property not an attribute) is to use prop, see .prop() vs .attr():

$("#selectId option").prop('disabled', false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="selectId">
    <option value="JavaScript" disabled="">JavaScript</option>
    <option value="Angular">Angular</option>
    <option value="Backbone" disabled="">Backbone</option>
</select>

You can set .attr('disabled',false); but this doesn't work on every HTML element. The correct way to remove properties (disabled is a property and not an attribute) is prop.

Your each also doesn't return a jquery object, it returns a vanilla DOM element, hence the TypeError: item.attr is not a function.. item does not have a attr function because it's not a jquery object.

edited Jun 01 '20 at 07:11

answered Jun 15 '17 at 09:56

Liam

27,717
28
128
190

Neither is working: TypeError: $(...).prop is not a function – user2598794 Jun 15 '17 at 10:03
Have you loaded jquery? What version of jquery are you using? – Liam Jun 15 '17 at 10:04
FYI `disabled="false"` makes sense! – Prashant Shirke Jun 15 '17 at 10:13
@PrashantShirke no it doesn't, disabled is a property, it's usage is implied by its' existance or lack of. The equals part is never read. An option is either `` or ``. `` is invalid HTML (though most browsers will handle it, kinda) – Liam Jun 15 '17 at 10:34
See [Correct value for disabled attribute](https://stackoverflow.com/questions/6961526/correct-value-for-disabled-attribute) – Liam Jun 15 '17 at 10:37

score 2 · Answer 2 · edited Jun 15 '17 at 09:55

var select = $("#selectId");
select.find("option:disabled").prop("disabled",false)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectId">
    <option value="JavaScript" disabled="">JavaScript</option>
    <option value="Angular">Angular</option>
    <option value="Backbone" disabled="">Backbone</option>
</select>

No need to iterate.
Use selector :disabled to select all disabled
Use .prop() to set to enabled

Stanislav Kvitash · Answer 3 · 2017-06-15T10:10:50.487

1

Your initial version is not working since your selector select.find("option") returns a jQuery object known as the "wrapped set", which is an array-like structure that contains all the selected DOM elements. This elements are not jQuery objects so attr() method will not work and that is why you get TypeError: item.attr is not a function.

UPDATE: For @Liam, this will work with .attr('disabled', false) as you can see from the code below. But I still prefer using .prop().

var select = $("#selectId");
select.find("option").each(function(index, item) {
  $(item).attr('disabled', false);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selectId">
    <option value="JavaScript" disabled="">JavaScript</option>
    <option value="Angular">Angular</option>
    <option value="Backbone" disabled="">Backbone</option>
</select>

edited Jun 15 '17 at 10:10

answered Jun 15 '17 at 10:03

Stanislav Kvitash

4,614
18
29

Also the syntax for `attr` is wrong, you can't set the `disabled` attribute to false. – Liam Jun 15 '17 at 10:04
@Liam I can, this is working: $(item).attr('disabled',false); – user2598794 Jun 15 '17 at 10:07
[Turns out this is a thing](https://stackoverflow.com/a/13626608/542251), though this is incorrect usage... – Liam Jun 15 '17 at 10:11
@Liam yes, it is better to use `prop()` – Stanislav Kvitash Jun 15 '17 at 10:12

score 1 · Answer 4 · answered Dec 01 '21 at 19:43

1

Using jQuery-3.5.1, this worked for me:

$("#selectId").find("option:disabled").removeAttr('disabled');

answered Dec 01 '21 at 19:43

Fjodr

919
13
32

Simon L. · Answer 5 · 2017-08-16T06:19:09.923

-1

This one should work fine :)

$("#selectId option").each((i,items)=>{
        $(items).attr('disabled',false)
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectId">
        <option value="JavaScript" disabled="">JavaScript</option>
        <option value="Angular">Angular</option>
        <option value="Backbone" disabled="">Backbone</option>
    </select>

edited Aug 16 '17 at 06:19

answered Jun 15 '17 at 10:32

Simon L.

71
5

Wow!!! it seems that i messed something up in a terrible way. Maybe some one can explain the down vote and prevent me in doing other people more harm then necessary – Simon L. Jul 06 '17 at 14:06
--> According to my terrible answer – Simon L. Jul 06 '17 at 14:14

Make all options enabled in select element

5 Answers5