隐藏提交按钮基于多个类的选择

Question

我有一个有4个依赖的选择下拉列表的表单。我想要的是，隐藏/禁用提交按钮，直到从最后一个选择选项被选中。

const select = document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0];
const submitButton = document.querySelectorAll(".button, .woof_submit_search_form");
document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0].addEventListener('change', () => {
if (select.value === '0') {
submitButton.disabled = true;
} else {
submitButton.disabled = false;
}
});

<select class="f_select f_select_product_cat f_select_product_cat_0" name="product_cat">
<option value="0">Select cat 1</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="f_select f_select_product_cat f_select_product_cat_1" name="product_cat">
<option value="0">Select cat 2</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="f_select f_select_product_cat f_select_product_cat_2" name="product_cat">
<option value="0">Select cat 3</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select class="f_select f_select_product_cat f_select_product_cat_3" name="product_cat">
<option value="0">Select cat 4</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<button class="button f_submit_search_form">SEARCH</button>

我没有太多的控制表单呈现，所以我最好的选择是获得按钮和最后一个选择的类名，但正如你可以看到他们有多个类。

也尝试使用getElementsByName("product_cat")[0]进行选择，但也不能使其工作。

感谢您的帮助。

Answer 1

我看到的第一个问题是，当值为0时，您将submitButton设置为disabled。但是，只有当它的值在您收听change时发生变化时，您才能执行该验证。

你只有一个按钮，为什么你要用document.querySelectorAll检索它?简单地使用querySelector。更重要的是，当您试图将NodeList设置为disabled = true而不是元素时，这是一个问题!为了便于理解，下面是两个输出:

<标题>querySelectorAll h1> 好，我们现在知道为什么它不起作用了!我们正在尝试将disabled = true

设置为NodeList，其形式类似于数组!在我们的例子中，我们只需要一个元素，所以我们可以通过使用querySelector来解决这个问题。

<标题>querySelector h1> 看起来更像是我们需要的:只有按钮。现在，我们的.disabled是有意义的和工作!

const select = document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0];
const submitButton = document.querySelector(".button, .woof_submit_search_form");
select.addEventListener("change", () => {
if (select.value === '0') {
submitButton.disabled = true
} else {
submitButton.disabled = false
}
})

这个逻辑有一个小缺陷:我们只设置submitButton在addEventListener出现时显示。

所以我们需要在HTML中添加disabled默认值，根据默认值，它肯定不会被设置为默认值以外的任何值。

<button class="button f_submit_search_form" disabled>SEARCH</button>

它现在工作，按钮将被启用，只有当最后一个字段的值不是0。