Problem disabling certain dropdown input fields using Javascript

Question

Am working on an application whereby I have some cards that have select dropdown fields. On the Cards I have written a JavaScript logic whereby if the user selected a wife or husband as an option on the any of the cards select drop down, any of the other husband or wife dropdown field should add a CSS class of disabled.

The problem is that the CSS class is not added on other options on the cards which match husband or wife. Basically, I want when the user selects wife or husband option on any card, all other husband or wife options on other cards should change the class to be disabled (which has pointer-vents of none).

My code:

var menus = document.querySelectorAll('.otherMenu');
for (let menu of menus) {
  menu.addEventListener('change', function() {
    var selectedOption = this.value;
    var selectWife = document.querySelectorAll('.otherMenu option[value="Wife"]');
    var selectHusband = document.querySelectorAll('.otherMenu option[value="Husband"]');
    selectWife.forEach(function(option) {
      var change1 = option.classList.add('disabled');
      change = selectedOption === 'Wife';
    });
    selectHusband.forEach(function(option) {
      var change2 = option.classList.add('disabled');
      change2 = selectedOption === 'Husband';
    });
  });
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
  color: blue;
}

<!-- Card 1 -->
<form method="POST" action="#" id="phase3">
  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
  <!-- Gender -->
  <div class="row registerRelationph3">
    <label class="fm-input"> Relation :</label>
    <select class="fm-input otherMenu" id="relation1" required>
      <option value="Husband"> Husband </option>
      <option value="Wife"> Wife </option>
      <option value="Son"> Son </option>
      <option value="Daughter"> Daughter </option>
    </select>
  </div>
  <!-- END -->

  <!-- DOb -->
  <div class="row">
    <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>
    <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
  </div>
  <!-- END dob -->
  <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>
</form>
<!-- End card 1 -->

<!-- Card 2-->
<form method="POST" action="#" id="phase3">
  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
  <!-- Gender -->
  <div class="row registerRelationph3">
    <label class="fm-input otherMenu"> Relation :</label>
    <select class="fm-input" id="relation1" required>
      <option value="Husband"> Husband </option>
      <option value="Wife"> Wife </option>
      <option value="Son"> Son </option>
      <option value="Daughter"> Daughter </option>
    </select>
  </div>
  <!-- END -->

  <!-- DOb -->
  <div class="row">
    <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>
    <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
  </div>
  <!-- END dob -->
  <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>
</form>
<!-- End card 2-->

<!-- Card 3-->
<form method="POST" action="#" id="phase3">
  <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
  <!-- Gender -->
  <div class="row registerRelationph3">
    <label class="fm-input"> Relation :</label>
    <select class="fm-input otherMenu" id="relation1" required>
      <option value="Husband"> Husband </option>
      <option value="Wife"> Wife </option>
      <option value="Son"> Son </option>
      <option value="Daughter"> Daughter </option>
    </select>
  </div>
  <!-- END -->

  <!-- DOb -->
  <div class="row">
    <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>
    <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
  </div>
  <!-- END dob -->
  <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>
</form>
<!-- End card 3-->

Possible duplicate of [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) — maazadeeb, May 03 '19 at 09:23

wormania · Accepted Answer · 2019-05-03T11:30:54.450

As per the linked question from Maaz, you cannot style an individual option element (except for color/background-color). However for this use case you don't need to, option has a disabled property which does what you want: Disables selecting and fades the option.

Javascript:

var menus = document.querySelectorAll('.otherMenu');
for (let menu of menus) {
  menu.addEventListener('change', function() {
    var selectedOption = this.value;
    var thisMenu = this;
    var selectWife = document.querySelectorAll('.otherMenu option[value="Wife"]');
    var selectHusband = document.querySelectorAll('.otherMenu option[value="Husband"]');
    selectWife.forEach(function(option) {
      if(!(thisMenu === option.parentNode)){
        if(selectedOption === 'Wife'){
            option.disabled = true;
        }
      }
    });
    selectHusband.forEach(function(option) {
      if(!(thisMenu === option.parentNode)){
        if(selectedOption === 'Husband'){
            option.disabled = true;
        }
      }
    });
  });
}

CSS:

.other-menu option:disabled {
  color: blue;
}

Notes: you have otherMenu class incorrectly assigned incorrectly placed in your HTML, and I'd recommend having a placeholder value before a selection is made, as in this JSFiddle:

@womania Disabling makes the value to be null,,I want the text to be disabled but the value to remain intact .. — Martin, May 03 '19 at 10:53
Then you want to add readonly attribute it has the same affect as disabled but allows the value to stay intact — MasterT, May 03 '19 at 11:09
@Martin Changed the code to add a check - it now only disables menus other than the one selected (keeping the value intact for the menu that was selected) — wormania, May 03 '19 at 11:11

Problem disabling certain dropdown input fields using Javascript

1 Answers1