The disable attribute in option tag not working

[Marius]

I have designed a html page, but in option tag I have set disabled="true", still it is not disabling the option.

Things I have tried:

Code: Select all

disabled="true"

disabled="disabled"

And in JS with jQuery:

Code: Select all

$(".dis").prop("disabled", true);

Here is my html code:

Code: Select all

<select name="selectcountry1" id="c1">
  <option value="select" class="dis" disabled="true" selected>Select Country 1</option>
  <option value="India">India</option>
  <option value="Australia">Australia</option>
  <option value="England">England</option>
  <option value="NewZealand">New Zealand</option>
  <option value="SouthAfrika">South Afrika</option>
  <option value="WestIndies">West Indies</option>
  <option value="Pakistan">Pakistan</option>
  <option value="SriLanka">Sri Lanka</option>
  <option value="Bangladesh">Bangladesh</option>
  <option value="Afganistan">Afganistan</option>
</select>

Is there any other way to disable those options?

The attribute disabled sets without value (without ='true'). You need just add this attribute into the options you want disabled.

Code: Select all

<option value="select" class="dis" disabled>

for setting this attribute on JavaScript with jQuery, you need to write something like this:

Code: Select all

$('option.dis').attr('disabled');

for check option to disabled:

Code: Select all

if ($('option.dis').prop('disabled') === true)