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?

Answer 1

You can do this in one line:

$("#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>

disabled is a property so should be changed using prop() not attr(), see .prop() vs .attr()

~~You existing one isn't working because .attr('disabled',false); is invalid.~~ Your trying to set the attribute disabled to false, this is like doing <option disabled="false"> which doesn't make sense. Like I said you really want prop here.

Turns out you can set .attr('disabled',false);. Either way 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.

Answer 2

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>

Answer 3

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

Answer 4

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>

Make all options enabled in select element

4 个答案: