javascript删除必需属性以混合方式工作

Question

您好我有一个奇怪的问题，我提交了一个注册表单，并有一个复选框脚本，用于检查是否单击了复选框以删除其余复选框中的所需属性。

这是剧本：

$(document).ready(function(){

    $(".aboveage5").click(function(){
        if ($('input[name="tipo_de_producto_que_fabrica[]"]:checked').val() != "" ) {
            $('input[name="tipo_de_producto_que_fabrica[]"]:not(:checked)').removeAttr('required');
             //Slide Down Effect  
        } else {           
            $('input[name="tipo_de_producto_que_fabrica[]"]:checked').prop('required',true);    //Slide Up Effect
        }
     });            
});

我的表单代码如下：

<form method="post" id="myform">
<input type="checkbox" required class="aboveage5"  name="tipo_de_producto_que_fabrica[]" value="val 1"  /> PAN FRANCES<br />
<input type="checkbox" required class="aboveage5"  name="tipo_de_producto_que_fabrica[]" value="val 2"  /> PAN DULCE<br />
<input type="checkbox" required  class="aboveage5" name="tipo_de_producto_que_fabrica[]" value="val 3"  /> PAN DE VIGA <br />


 <input type="submit" name="register" value="Register" />

脚本行为如下，如果我在点击提交按钮之前选中其中一个复选框，一切正常。但是，如果我提交的按钮没有任何框被选中，则表示thoose字段不能为空。一旦我在代码中选择其中一个，它就会删除所需的属性，但是当我再次点击提交按钮时，没有任何事情发生，它会显示弹出气球，表示该字段已被请求，但它没有说明内部任何内容，如果我点击提交第二次提交按钮。问题是我必须按两次提交按钮，直到它被提交为止。任何帮助将不胜感激。谢谢。

这是验证码功能：

$(document).ready(function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Este campo no puede dejarse en blanco");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

问题似乎在自定义验证中，因为没有它它可以正常工作。

在验证之前清除POST数组解决了问题。

Answer 1

而不是

.removeAttr('required')

试

.prop('required', false)

Answer 2

你可以做类似的事情 -

$(document).ready(function(){

    $(".aboveage5").click(function(){
        var checkedArray =$('input[name="tipo_de_producto_que_fabrica[]"]:checked');
        // Check if atleast one element is checked
        if(checkedArray!=null && checkedArray.length>0){
           $('input[name="tipo_de_producto_que_fabrica[]"]:not(:checked)').removeAttr('required');
        }else{
           $('input[name="tipo_de_producto_que_fabrica[]"]').attr('required',true); // Could also use .prop() instead
        }    

     });            
});