user1170330 user1170330 - 6 months ago 62
jQuery Question

Disable element in Datalist

How can I disable a particular element in a datalist? It could either be just disabled (grayed out) our disappear completely. It just should not be selectable.

This is my approach, but that didn't help:

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

Answer

Use attribute equals selector to get the option with value 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") simply search for element with tag name as Firefox(eg : <Firefox>).

For more about jQuery selectors visit here.