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

根据Maaz的链接问题 ，您无法设置单个option元素的样式（ color / background-color除外）。 但是对于您不需要的此用例， option具有disabled所需操作的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;
}

注意：您在HTML中错误地分配了其他otherMenu类错误，我建议在选择之前使用占位符值， 如此JSFiddle ：