CODEWITHSUNDEEP
javascriptjquery
user2598794
user2598794

Reputation: 727

Make all options enabled in select element

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?

Upvotes: 2

Views: 5229

Answers (5)

Fjodr
Fjodr

Reputation: 923

Using jQuery-3.5.1, this worked for me:

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

Upvotes: 1

Liam
Liam

Reputation: 29760

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.

Upvotes: 6

Simon L.
Simon L.

Reputation: 71

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>

Upvotes: -1

Stanislav Kvitash
Stanislav Kvitash

Reputation: 4622

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>

Upvotes: 1

guradio
guradio

Reputation: 15565

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>

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

Upvotes: 2

Related Questions