单击另一个选择字段时，如何禁用选择选项？

问题描述

我有两个选择字段。一个选择T恤设计的字段，另一个选择T恤的颜色。

目标是默认禁用所有T恤颜色，直到首先从“设计”列表中选择一个设计。选择设计后，该设计类别中的颜色将被启用，而另一个设计类别中的颜色将保持禁用，反之亦然。永远不要一次全部启用它们。

我尝试编写和重新编写我的JavaScript函数以使其多次运行，并且每次控制台均未显示任何错误，但同时也无法按我的意愿运行。

我做错了什么？

const tshirtDesignSelection = document.getElementById("design");
const heartJsColors = document.querySelectorAll('.heartJsGroup');
const jsPunsColors = document.querySelectorAll('.jsPunsGroup');

function tshirtSelectorFunction() {
    for (let i = 0; i < tshirtDesignSelection.length; i++) {
        tshirtDesignSelection[i].addEventListener('change',() => {
            if (tshirtDesignSelection[i].value === "js_puns") {
                heartJsColors[0].disabled = true;
            } else if (tshirtDesignSelection[i].value === "heart_js") {
                jsPunsColors.disabled = true;
            } else {
                jsPunsColors.disabled = true;
                heartJsColors.disabled = true;
            }
        });
    }
}
tshirtSelectorFunction();

<div>
            <label for="design">Design:</label>
            <select id="design" name="user-design" onchange="tshirtSelectorFunction()">
              <option value="default_design" disabled selected>Select Theme</option>
              <option value="js_puns" id="jsPunsTheme" class="designOptions">Theme - JS Puns</option>
              <option value="heart_js" id="heartJSTheme" class="designOptions">Theme - I &#9829; JS</option>
            </select>
          </div>

          <div id="shirt-colors" class="shirt-colors">
            <label for="color">Color:</label>
            <select id="color">
              <option value="default_color" disabled selected>Please select a T-shirt theme</option>
              <option value="cornflowerblue" class="jsPunsGroup">Cornflower Blue (JS Puns shirt only)</option>
              <option value="darkslategrey" class="jsPunsGroup">Dark Slate Grey (JS Puns shirt only)</option>
              <option value="gold" class="jsPunsGroup">Gold (JS Puns shirt only)</option>
              <option value="tomato" class="heartJsGroup">Tomato (I &#9829; JS shirt only)</option>
              <option value="steelblue" class="heartJsGroup">Steel Blue (I &#9829; JS shirt only)</option>
              <option value="dimgrey" class="heartJsGroup">Dim Grey (I &#9829; JS shirt only)</option>
            </select>
          </div>

解决方法

签出this，它还包括有关如何执行类似操作的查询版本

而不是使用thing.disabled，请尝试使用thing.setAttribute()和thing.removeAttribute()