Отключить элемент в Datalist

Question

Как отключить определенный элемент в datalist? Это может быть просто отключено (выделено серым цветом), и мы полностью исчезли. Его просто не следует выбирать.

Это мой подход, но это не помогло:

$("#browsers").find("Firefox").prop("disabled", true); 

<input list="browsers"> 

<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 

FIDDLE.

UPDATE:

Я просто заметил, что она не работает, когда я просто клонировали DataList:

$("#mydiv").append($('.myclass').clone()); 
$("#browsers:eq(1)").find("[value='Firefox']").prop("disabled", true); 

Любые предложения?

UPDATED FIDDLE.

Answer 1

Использование attribute equals selector, чтобы получить возможность со значением Firefox

$("#browsers").find("[value='Firefox']").prop("disabled", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input list="browsers"> 
 

 
<datalist id="browsers"> 
 
    <option value="Internet Explorer"> 
 
    <option value="Firefox"> 
 
    <option value="Chrome"> 
 
    <option value="Opera"> 
 
    <option value="Safari"> 
 
</datalist>

---

FYI: find("Firefox") просто поиск элемента с именем тега, как Firefox (например: <Firefox>).

Для получения дополнительной информации о jQuery selectors visit here.

---

UPDATE: Как ваш вопрос обновленный #browsers:eq(1) не отберет ничего. Первая причина id Селектор выбирает только уникальный элемент, тогда eq(1) попытается выбрать второй элемент из выбранного элемента jQuery (поскольку индекс начинается с 0 в :eq()), поэтому он ничего не выбирает. Поэтому просто избегайте eq(), это решит проблему.

Также вы можете комбинировать селектор как этот

$("#browsers [value='Firefox']").prop("disabled", true); 

---

FYI: Кроме того, вы просто клонировать input тег, который также используя существующий DataList.