Disable Element in Datalist

Question

Wie kann ich ein bestimmtes Element in einem Datenlisten deaktivieren? Es könnte entweder nur deaktiviert (ausgegraut) sein, wir verschwinden komplett. Es sollte einfach nicht auswählbar sein.

Das ist mein Ansatz, aber das hat nicht geholfen:

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

ich gerade bemerkt, dass es nicht funktioniert, wenn ich geklont nur die Datenliste:

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

Irgendwelche Vorschläge?

UPDATED FIDDLE.

Answer 1

Verwenden attribute equals selectorFirefox

$("#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 die Option mit dem Wert zu erhalten: find("Firefox") einfach für Element mit Tag-Namen als Firefox (: <Firefox> eg) suchen. Für weitere Informationen über jQuery selectors visit here.

---

UPDATE: Da Ihre Frage aktualisiert #browsers:eq(1) wird nichts aus. Erster Grund id Selektor wählt nur ein eindeutiges Element aus, dann versucht eq(1), das zweite Element aus dem jQuery-ausgewählten Element auszuwählen (da der Index von 0 in :eq() beginnt), wodurch nichts ausgewählt wird. So vermeiden Sie einfach die eq() Dies wird das Problem lösen.

Auch können Sie die Wahl kombinieren wie dieses

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

---

FYI: Auch sind Sie nur den input Tag Klonen, die auch die bestehende Datenliste verwenden.