javascript - 使用 Javascript 禁用某些下拉输入字段时出现问题

Question

我正在开发一个应用程序，其中我有一些卡片选择下拉字段。在卡片上我写了一段 JavaScript如果用户选择妻子或丈夫作为选项的逻辑在任何卡片上选择下拉菜单，任何其他丈夫或妻子下拉字段应添加禁用的 CSS 类。

问题是 CSS 类没有添加到匹配丈夫或妻子的卡片上的其他选项。基本上，我希望当用户在任何卡片上选择妻子或丈夫选项时，其他卡片上的所有其他丈夫或妻子选项都应该将类更改为禁用(指针通风口为无)。

我的代码:

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-->

Answer 1

根据 linked question from Maaz ，您不能设置单个 option 元素的样式(color/background-color 除外)。然而，对于这个用例，您不需要，option 有一个 disabled 属性，它可以执行您想要的操作:禁用选择并淡化选项。

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;
}

注意:您有 otherMenu 类错误地分配错误地放置在您的 HTML 中，我建议在进行选择之前有一个占位符值，如 this JSFiddle :