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?

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?

• javascript
• jquery

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

5 Answers 5

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./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.

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

<script src="https://ajax.googleapis./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>

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

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./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>

Using jQuery-3.5.1, this worked for me:

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

This one should work fine :)

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

<script src="https://ajax.googleapis./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>