如何允许多个 if 并修复 "Expected an assignment or function call" 和 &&

How to allow multiple if and fix "Expected an assignment or function call" and &&

对不起,我的代码很糟糕。我是网络开发新手,尤其是 jQuery。

我希望保持 "add to cart" 禁用,除非满足所有必需的输入。

我知道我可以在 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 个错误。错误是,最后列出的 && 是唯一需要满足的要求,而不是所有要求。

我得到的错误是 "expected an assignment or function call instead saw an expression"

你的问题是语法不正确。如果你想为所有 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);
            }
        );
    }
);