CODEWITHSUNDEEP
javascriptjqueryhtml
Evgenij Reznik
Evgenij Reznik

Reputation: 18594

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.

UPDATE:

I just noticed, that it doesn't work when I just cloned the datalist:

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

Any suggestions?

UPDATED FIDDLE.

Upvotes: 1

Views: 3252

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115222

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.

UPDATE : As your question updated #browsers:eq(1) will select nothing. First reason id selector only selects unique element, then eq(1) will try to select second element from the jQuery selected element( since index starts from 0 in :eq()) so which selects nothing. So just avoid the eq() this will solve the problem.

Also you can combine the selector like this

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

FYI : Also you are just cloning the input tag which also using the existing datalist.

Upvotes: 4

Related Questions