select要素ですべてのオプションを有効にする

Question

いくつかのオプションを無効にしてドロップダウンがあります。そして、私はすべてのオプションを有効にしたい。

<select id="selectId"> 
    <option value="JavaScript" disabled="">JavaScript</option> 
    <option value="Angular">Angular</option> 
    <option value="Backbone" disabled="">Backbone</option> 
</select> 

JavaScriptの：

これはHTMLある

var select = $("#selectId"); 
select.find("option").each(function(index, item) { 
    item.attr('disabled',false); 
}); 

しかし、私はエラーを取得する：TypeError例外：item.attrがされていない機能。ここで何が間違っていますか？

Answer 1

を有効に設定し

すべて無効に使用 .prop()を選択する

使用セレクタ:disabled：

$("#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は、プロパティでありますprop()ではなく01を使用して変更する必要があります、あなたが.attr('disabled',false);が無効であるため、1が動作していない既存の.prop() vs .attr()

を参照してください。 アトリビュートをfalseに設定しようとすると、これは意味がない<option disabled="false">のようなものです。私が言ったように、実際にはpropがほしいと思っています。

あなたは.attr('disabled',false);を設定できます。どちらの方法でも、プロパティを削除する正しい方法（無効で属性であり属性ではない）はpropです。

eachもjqueryオブジェクトを返さず、バニラDOM要素、つまりTypeError: item.attr is not a function.を返します。 itemは、jqueryオブジェクトではないため、attr関数がありません。

Answer 2

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. 反復処理する必要はありません。あなたは1行でこれを行うことができます

Answer 3

セレクタselect.find("option")がjQuery object known as the "wrapped set"（contains all the selected DOM elements）という配列のような構造を返すため、最初のバージョンが機能しません。この要素はjQueryオブジェクトではないので、attr() methodは機能しません。そのため、TypeError: item.attr is not a functionが得られます。

更新： @Liamの場合、これは.attr('disabled', false)と下のコードから分かります。しかし、私はまだ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 4

この1つは罰金:)

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