在選擇元素中啓用所有選項

Question

我有一個下拉列表，其中包含一些禁用的選項。我希望啓用所有選項。

這是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); 
}); 

但我得到一個錯誤：類型錯誤：item.attr是不是一個功能。這裏有什麼問題？

Answer 1

您可以在一行做到這一點：

$("#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()而不是attr()，請參閱.prop() vs .attr()

您現有的一個不工作，因爲 .attr('disabled',false);無效。 您試圖將禁用的屬性設置爲false，這就像<option disabled="false">這是沒有意義的。就像我說的你真的想在這裏prop。

原來你可以設置.attr('disabled',false);。無論哪種方式刪除屬性（禁用是一種屬性，而不是屬性）的正確方法是prop。

你的each也不返回一個jquery對象，它返回一個香草DOM元素，因此TypeError: item.attr is not a function.。 item沒有attr函數，因爲它不是jquery對象。

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. 無需進行迭代。
2. 使用選擇:disabled選擇所有殘疾
3. 使用.prop()設置爲啓用

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。

UPDATE：對於@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

這一個應該工作正常:)

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