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

问题描述

我有两个选择字段。一个选择 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>

标签： javascripthtmlselectoptions

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

问题描述

解决方案

推荐阅读