1

Question

我在选择多个输入字段时遇到问题并删除了所需的属性。我使用Php / Symfony3并在一个页面中创建了多个表单。这两种形式都有效，并将正确的信息发送回客户端。

表单称为shippingAddress和billingAddress，但是当用户说两个表单都相同时，填写这两个表单是没用的。所以我决定创建一段代码来将所有数据设置为null（来自billingAddress）并将其发送回客户端。工作完美！

现在出现问题，因为我希望在地址不相同时填写一些必填字段。它不会发送表单，因为它表示某些输入字段尚未归档。

我创建了一些例子，但它对我来说并不好看。是否有更好的方法来实现相同的结果？ 并非所有字段都是必需的

编辑：忘记了我的问题的重要事项，需要切换所需的选项。

1

    $(document).ready(function(){
            $("#form_check").click(function(){
                $("#form_billingAddress").fadeToggle();
                $("#form_billingAddress_firstName").removeAttr('required');
                $("#form_billingAddress_lastName").removeAttr('required');
                $("#form_billingAddress_email").removeAttr('required');
                $("#form_billingAddress_streetName").removeAttr('required');
                $("#form_billingAddress_streetNumber").removeAttr('required');
                $("#form_billingAddress_city").removeAttr('required');
                $("#form_billingAddress_pOBox").removeAttr('required');
                $("#form_billingAddress_phone").removeAttr('required');
            });
        });
#2
        jQuery(document).ready(function($){
            $("#form_check").on("click",function(){
                $("#form_billingAddress").fadeToggle();
                $("#form_billingAddress_firstName, " +
                    "#form_billingAddress_lastName, " +
                    "#form_billingAddress_email, " +
                    "#form_billingAddress_streetName, " +
                    "#form_billingAddress_streetNumber, " +
                    "#form_billingAddress_city, " +
                    "#form_billingAddress_pOBox, " +
                    "#form_billingAddress_phone").removeAttr('required');
            });
        });

提前致谢！

Answer 1

您可以在jQuery中使用CSS3选择器。 W3schools上选择器的文档。

jQuery(document).ready(function($){
    $("#form_check").on("click",function(){
        $("#form_billingAddress").fadeToggle();
        $("input[id^='form_billingAddress_']").removeAttr('required'); // the tick
    });
});

使用切换：

var required = true;
jQuery(document).ready(function($){
    $("#form_check").on("click",function(){
        $("#form_billingAddress").fadeToggle();
        if(required){
            $("input[id^='form_billingAddress_']").removeAttr('required');
        }else{
            $("input[id^='form_billingAddress_']").attr('required', true);
        }
        required = !required;
    });
});

使用变量比检查元素是否需要更快。这就是我选择这个的原因。

编辑：可以做得更好：

var required = true;
jQuery(document).ready(function($){
    $("#form_check").on("click",function(){
        $("#form_billingAddress").fadeToggle();
        $("input[id^='form_billingAddress_']").attr('required',required);
        required = !required;
    });
});

Answer 2

1）由于给出的答案已涵盖部分选择器的使用，例如

$("input[id^='form_billingAddress_']").removeAttr('required');

2）您还可以使用课程。将类添加到要选择的所有输入元素，并立即删除该属性。让我们使用类名form_billingAddress。

$(".form_billingAddress']").removeAttr('required');

在性能方面，第二个选项更快

Answer 3

您可以使用数组进行迭代。

$(document).ready(function(){
        $("#form_check").click(function(){
            $("#form_billingAddress").fadeToggle();
            var $arr = [];
            $arr.push($("#form_billingAddress_firstName"),
            $("#form_billingAddress_lastName"),
            $("#form_billingAddress_email"),
            $("#form_billingAddress_streetName"),
            $("#form_billingAddress_streetNumber"),
            $("#form_billingAddress_city"),
            $("#form_billingAddress_pOBox"),
            $("#form_billingAddress_phone"))

            $arr.forEach(function(v,i){
                $(v)..removeAttr('required');
            })
        });
    });

编辑：有更多优雅的方法可以做你想做的事。

如何选择多个输入字段并删除所需的属性？

1

3 个答案: