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

更新

我刚刚注意到，当我刚刚克隆了数据列表时它不起作用：

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

仅供参考： find("Firefox")只需搜索标记名为Firefox的元素（例如：<Firefox>）。

有关jQuery selectors visit here的更多信息。

更新：更新后的问题#browsers:eq(1)将不会选择任何内容。第一个原因id选择器只选择唯一元素，然后eq(1)将尝试从jQuery选择元素中选择第二个元素（因为索引从0中的:eq()开始，因此选择没有。所以只需避免eq()这将解决问题。

您也可以像这样组合选择

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

<小时/> 仅供参考：您也只是使用现有的数据列表来克隆input标记。

禁用Datalist中的元素

1 个答案: