CODEWITHSUNDEEP
javascripthtmlformshtml-select
Question Overflow
Question Overflow

Reputation: 11275

How to enable all disabled form select options without jQuery?

I have a HTML form with a few select elements. One of the option in each of these elements has been disabled initially. Example:

<label>Amount: <select name="amount">
    <option selected value='0'>Any</option>
    <option value="1">100+</option>
    <option value="2">200+</option>
    <option value="3">500+</option>
    <option disabled value="4">Specify</option>
</select></label>

I need to enable them with javascript. Is there a good way to target these elements without using jQuery?

Upvotes: 0

Views: 2718

Answers (3)

Amit Joki
Amit Joki

Reputation: 59292

This will take care of all disabled elements and is simple.

You can do this:

var elems = document.querySelectorAll('[disabled]'); // target all disabled elemnts
for (var i = 0; i < elems.length; i++) {
    elems[i].removeAttribute('disabled'); // enable them.
}

Live Demo

Upvotes: 2

chris97ong
chris97ong

Reputation: 7070

JS:

var ddl = document.getElementsByTagName("select");
for (var m = 0; m < ddl.length; m++) {
   for (var i = 0; i < ddl[m].length; i++) {
      ddl[m].options[i].disabled = false;
   }
}

Working fiddle.

Upvotes: 2

RobG
RobG

Reputation: 147563

If you want to enable every option element in the document, you can do:

var options = document.getElementsByTagName('option');
for (var i=0, iLen=options.length; i<iLen; i++) {
  options[i].disabled = false;
}

If you want to enable only the options for a specific select element, first get a reference to it then use its options collection:

var options = select.options;
// continue as as above...

Upvotes: 2

Related Questions