Question

关注此帖子here我可以使用单选按钮和复选框为表单添加验证：如果每个问题至少选择一个选项，则启用提交按钮。

这是代码：

 $('input:submit').attr('disabled',true);
 var input_groups = {}
 $("input:radio, input:checkbox").each(function(){
                          $(this).attr('checked', false);
                          input_groups[this.name] = true;
                         });

 $('input:radio, input:checkbox').change(function() {

var submission = true;


for(group in input_groups){

   is_checked = !!$("[name=" + group + "]:checked").length

   if(!is_checked){ submission = false;}

}

if (submission){

        $("label[for='submit']").html('You are ready to submit!');
    $('input:submit').attr('disabled',false);
}

 });

它有效，但是如果我不小心取消选中了一个复选框，则提交按钮会保持启用状态......我可能会遗漏一些明显的东西......

有什么建议吗？

谢谢

Answer 1

在onchange处理程序中，检查是否有任何选中并启用了提交按钮，但如果检查失败，则忘记禁用它：

if (submission){
   $("label[for='submit']").html('You are ready to submit!');
   $('input:submit').attr('disabled',false);
} else {
   $("label[for='submit']").html('You are NOT ready to submit!');
   $('input:submit').attr('disabled',true);
}

Answer 2

您的代码：

if (submission){
    $("label[for='submit']").html('You are ready to submit!');
    $('input:submit').attr('disabled',false);
}

只有在提交为false时才会执行此操作，因此不会将其设置为禁用。重构为：

if (submission){
    $("label[for='submit']").html('You are ready to submit!');
}
$('input:submit').attr('disabled',!submission);

检查是否在带有单选按钮和复选框的表单中选择了至少一个选项

2 个答案: