Why this disable attribute in option tag not working? Where is the problem?

Question

I have designed a HTML webpage, and in my option tag I have set disabled="true", but it is not disabling the option.

Things I have tried -

1. disabled="true"
2. disabled="disabled"
3. $(".dis").prop("disabled", true);

My code -

$(document).ready(function() {
  var $selects = $('select');
  $selects.on('change', function() {
    $("option", $selects).prop("disabled", false);
    $selects.each(function() {
      var $select = $(this),
        $options = $selects.not($select).find('option'),
        selectedText = $select.children('option:selected').text();
      $options.each(function() {
        if ($(this).text() == selectedText) $(this).prop("disabled", true);
      });
    });
  });

  $selects.eq(0).trigger('change');
});

var countries = {
  "India": ".ind",
  "Australia": ".aus",
  "England": ".eng",
  "NewZealand": ".nz",
  "SouthAfrika": ".sa",
  "WestIndies": ".wi",
  "Pakistan": ".pak",
  "SriLanka": ".sl",
  "Bangladesh": ".ban",
  "Afganistan": ".afg"

}

function getValue1(obj) {
  var sel1 = (obj.value);
  console.log(sel1);
  var counval = countries[sel1];

  for (var key in countries) {
    var dictvalue = countries[key];
    var hidden1 = 'select[name="player1"] '.concat(dictvalue);
    var hidden2 = 'select[name="player2"] '.concat(dictvalue);
    console.log("Hiding ".concat(dictvalue));
    $(hidden1).hide();
    $(hidden2).hide();

  }
  $(counval).show();
  console.log("Showing ".concat(counval));
}

function getValue2(obj) {
  var sel2 = (obj.value);
  console.log(sel2)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="get">

  <!-- First Country -->

  <div class="split left" style="height: 7%;
    margin-top: 1in;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    padding-top: 20px;
    left: 0;">

    <div class="centered" style=" position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);">

      <select name="selectcountry1" id="c1" onchange="getValue1(this)" class="btn btn-secondary btn-lg dropdown-toggle" style="background-color: #5959a6;">
        <option value="select" class="dis" disabled="true" style="color: grey" 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>

    </div>
  </div>

  <!-- Second Country -->

  <div class="ubmit right" style="height: 7%;
  margin-top: 1in;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  padding-top: 20px;
   right: 0;">

    <div class="centered" style="position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);">

      <select name="selectcountry2" id="c2" onchange="getValue2(this)" class="btn btn-secondary btn-lg dropdown-toggle" style="background-color: #5959a6;">
        <option value="select" class="dis" disabled="true" style="color: grey" selected>Select Country 2</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>
      <br>
    </div>
  </div>
</form>

Is there any other way to disable those options? I don't want those options to be enabled throughout the project.

Answer 1

Attribute disabled sets without ='true'. You need just add this attribute into the options you want disabled

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

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

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

for check option to disabled:

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

Answer 2

The disabled attribute does not take a value. It's an attribute in and of itself.

Change:

<option value="select" class="dis" disabled="true" style="color: grey"selected>Select Country 1</option>

To:

<option value="select" class="dis" disabled style="color: grey"selected>Select Country 1</option>