javascript - JQUERY 检查是否选择了列表框选项，用作 if 循环中的条件

Question

我目前有 2 个复选框类别、一个下拉列表和一个表单中的提交按钮。该按钮应保持“禁用”状态，直到选中 A 类的一个复选框和选中 B 类选项之一并选择选择列表中的一个选项。 它适用于复选框(当我在没有列表的情况下进行测试时)但列表存在问题。 当我从上到下(func --> plat --> lang)填写表格时，它不起作用。当我先选择“lang”然后选中复选框时，它以某种方式起作用。当我在选择语言后选中另一个复选框时，它也会从上到下工作。这很奇怪。 所以这是 HTML:

<h3>choose func</h3>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> func1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> func2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> func3<br/>
<br/>
<h3>choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> plat1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> plat2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> plat3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> plat4<br/>
<br/>
<h3>choose lang</h3>
<select name="sprache">
<option disabled selected> -- select an option -- </option>
<option name="deutsch" id="deutsch">Deutsch</option>
<option name="englisch" id="englisch">Englisch</option>
</select>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="Abfragen" disabled="">

还有 jQuery/js:

$(function () {
    $("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4, #deutsch, #englisch").change(function () {
        if (($("#func1").is(':checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) 
        && 
        ($("#plat1").is(':checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked')) 
        && 
        ($("#deutsch").is(':selected') || $("#englisch").is(':selected')))          
        {   
            $('.inputButton').attr('disabled', false);
        }
        else 
        {
            $('.inputButton').attr('disabled', true);
        }
    });
});

我不知道为什么它不起作用。您可以在我设置的 fiddle 中重现此问题:https://jsfiddle.net/3zqf4fxv/

希望有解决办法。 谢谢和问候!

Answer 1

改变

$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4, #deutsch, #englisch") 

到

$(":input")

jsFiddle example

问题在于在选择器中使用 #deutsch, #englisch。选择元素发生变化，而不是选项。 :input 只是一个 jQuery 快捷方式，用于选择示例中已有的内容，但请注意，如果您的页面上有其他输入元素，这将不是理想的选择。您可以将 #deutsch, #englisch 替换为 select[name='sprache']。

例如:

$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4, select[name='sprache']") 

jsFiddle example