如何根据数组中的内容将“禁用”属性切换到下拉菜单？

Question

I have a dropdown-menu of 5 options.

<select id="dd">
 <option value="1"> 1 <option>
 <option value="2"> 2 <option>
 <option value="3"> 3 <option>
 <option value="4"> 4 <option>
 <option value="5"> 5 <option>
</select>

I have an array that I need to check it against my dropdown-menu value

var enable = [1,3,5];

I want to produce this

<select id="dd">
  <option value="1"> 1 <option>
  <option value="2" disabled="disabled"> 2 <option>
  <option value="3"> 3 <option>
  <option value="4" disabled="disabled"> 4 <option>
  <option value="5" > 5 <option>
</select>

How can I disable my 2, and 4 option ?

I only want to enable 1,3 and 5 .

I'm a little stuck here.

$("#dd > option").each(function() {
    if(  inArray(this.val(),studentsArray ) !== -1 ){
        //prop the disabled attribute
    }
});

Can someone please give me a little push here ?

Answer 1

You can do it right in HTML like this:

<select id="dd">
  <option value="1"> 1 <option>
  <option value="2" disabled="disabled"> 2 <option>
  <option value="3"> 3 <option>
  <option value="4" disabled="disabled"> 4 <option>
  <option value="5" disabled="disabled"> 5 <option>
</select>

Note that disabled="disabled" is XHTML style. Plain old disabled by itself as others have posted will work fine too.

If your disabled options will always be the same, this will work. But if you want to use jQuery to disable all options not in the array, you can do this:

var array = [1, 3];
$('#dd option').prop('disabled', true); // Disables all
for (var i in array) { // Iterates over array
    $('#dd option[value="' + array[i] + '"]').prop('disabled', false); // Enable this one option
}

Answer 2

I am completely re-writing this answer of mine, because I have a much better answer. To change whether an option is disabled or not, give it an Id, or if there are several options to be disabled, give them all the same class. For an Id, (one element to be disabled only) do this:

variableName=document.getElementById('id');
//where 'id' in the line above is the id of the option to be disabled
variableName.setAttribute('disabled, 'disabled');

or for a class, it is very similar

optionstobechanged=document.getElementsByClassName('class');
//where 'class' in the line above is the name of the class given to the items to be disabled
for(i=0; i<optionstobechanged.length; i++){
    optionstobechanged[i].setAttribute('disabled', 'disabled');
}

note that this can be recycled for similar things. The

setAttribute();

function takes two strings: the property/attribute to be changed(ie selected, disabled) and the value of it. so

.setAttribute('disabled', 'disabled');

comes out as

disabled='disabled'

you can also apply this to selected, and other attributes. Now, all you have to do is rig this up inside a function and call it.