データリストの要素を無効にする

Question

データリスト内の特定の要素を無効にするにはどうすればよいですか？それは、私たちが完全に消えてしまう（灰色になってしまった）のかもしれません。それは単に選択するべきではありません。

これは私のアプローチですが、それは助けにはならなかった。

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

私はちょうど私がちょうどデータリストをクローン化されたとき、それは動作しないことに、気づい：

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

任意の提案を？

UPDATED FIDDLE。 attribute equals selector

Answer 1

使用はFYI値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>

---

でオプションを取得する： find("Firefox")は単に Firefoxとしてタグ名を持つ要素を検索（例： <Firefox>）。

jQuery selectors visit hereについては、

---

UPDATE：何も選択しないだろう#browsers:eq(1)更新あなたの質問として。 最初の理由idセレクタは一意の要素のみを選択します。eq(1)は、（インデックスは0から開始し、:eq()にあるので）jQueryで選択された要素から2番目の要素を選択しようとします。だからちょうどeq()を避けて、これが問題を解決します。

また、あなたはFYIこの

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

---

のようにセレクタを組み合わせることができます：はまた、あなただけのも、既存のデータリストを使用して inputタグをクローニングされています。