如何允许多个 if 并修复“预期分配或函数调用”和 &&

Question

抱歉，代码很尴尬。我是 web 开发的菜鸟，尤其是 jQuery。

除非满足所有必需的输入，否则我希望禁用“添加到购物车”。

我意识到我可以使用 HTML5 在表单上使用 required="" 或 required/> 但是，我也想禁用添加到购物车按钮。

我已经尝试过使用 &&，但它似乎并没有拾取倍数“ifs”

这是一个示例表单

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" /><br>
    <input type="radio" name="properties[Background]" id="keep" />
    <label for="keep">Keep</label>
    <input type="radio" name="properties[Background]" id="remove" />   
    <label for="remove">Remove</label><br>
    <input type="radio" name="properties[Shape]" id="Shaped" />
    <label for="keep">Shaped</label>
    <input type="radio" name="properties[Shape]" id="Square" />   
    <label for="remove">Squarede</label><br>
    <input class="choice" id="e-mail" type="email" name="properties[E-Mail]" placeholder="E-Mail Address"><br>
    <textarea class="choice" id="description" type="description" name="properties[Description]" placeholder="Example: I only want to use the dogs face."></textarea><br>
   <input id="checkoutbtn" type="submit" value="submit" disabled />
</form>

还有我正在使用的 jQuery

$(document).ready(
    function(){
        $('input:file').change && $("input[name='properties[Background]']").change && $("input[name='properties[Shape]']").change && $("input[name='properties[E-Mail]']").change (
            function(){
                if ($(this).val()) {
                    $('#checkoutbtn').prop('disabled',false); 
                } 
            }
            );
    });

我遇到了一个错误和 1 个错误。错误是，最后列出的 && 中的任何一个都是唯一需要满足的要求，而不是所有要求。

我得到的错误是“期望一个赋值或函数调用而不是看到一个表达式”

Answer 1

您的问题是语法不正确。如果您想为所有 4 个选择器分配更改处理程序，则不要像您所做的那样将它们的 .change 函数与 && 连接起来。相反，您将它们的选择器与 , 连接在一起。

试试这个：

$(document).ready(
    function() {
        $("input:file, input[name='properties[Background]'], input[name='properties[Shape]'], input[name='properties[E-Mail]']").change(
            function(){
                if ($(this).val()) {
                    $('#checkoutbtn').prop('disabled',false); 
                } 
            }
        );
    }
);

更新：

要要求为所有 4 个字段提供值以启用结帐按钮，您可以这样做：

$(document).ready(
    function() {
        var inputs = [
            $("input:file"),
            $("input[name='properties[Background]']"),
            $("input[name='properties[Shape]']"),
            $("input[name='properties[E-Mail]']")
        ];

        $("input").change(
            function () {
                var enableCheckoutButton = inputs.reduce(
                    function (enabled, input) {
                        return enabled && input.val();
                    },
                    true
                );

                $('#checkoutbtn').prop('disabled', !enableCheckoutButton);
            }
        );
    }
);