0

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

这是脚本：

$(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" />

脚本行为如下，如果我在点击提交按钮之前选择了其中一个复选框，则一切正常。但是，如果我提交的按钮没有选中任何框，则表示这些字段不能为空。一旦我在代码中选择其中一个，它就会删除所需的属性，但是当我再次点击提交按钮时什么都没有发生，它会显示弹出气球，上面写着该字段是必需的，但它里面没有任何内容，如果我点击第二次提交时的提交按钮。问题是我必须点击提交按钮 2 次，直到它被提交。任何帮助将不胜感激。谢谢。

在此处输入图像描述

这是验证码函数：

$(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 Array 解决了问题。

4

2 回答 2

0

代替

.removeAttr('required')

尝试

.prop('required', false)
于 2013-10-17T16:08:05.733 回答
0

你可以做类似的事情 -

$(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
        }    

     });            
});
于 2013-10-17T16:13:51.353 回答