Question

我做了一些研究但是，我还没有得到满足我需要的解决方案。我正在尝试创建一个jquery函数来检查所选复选框的数量。如果选中复选框小于min，则表单被阻止提交。在我的后端我正在使用django modelform

我的Jquery代码

$(document).ready(function() {
    $("form").submit(function(e) {
        var numberchecked= $('input:checkbox:checked').length;
        var min =3
        if (numberchecked<min) {
          e.preventDefault();
        }

   });
});

Answer 1

你快到了。尝试将return false添加到您的函数

$(document).ready(function(){
$("form").submit(function(e){
var numberchecked= $('input[type=checkbox]:checked').length;
var min =3
 if (numberchecked<min){
  return false;
  }
}); });

e.preventDefault（）与return false之间的区别：

区别在于返回false;把事情做得更进一步它还可以防止该事件传播（或者＆＃34;冒泡＆＃34;） DOM。你可能不知道这一点是每当一个事件发生在一个元素上，该事件在每个父元素上触发元素也是。所以，让我们说你盒子里面有一个盒子。两个盒子有点击事件。点击内框，点击一下即可除非你阻止传播，否则也会在外盒上触发。更多信息：https://css-tricks.com/return-false-and-prevent-default/

注意，我从输入中更改了选择器：复选框：选中以输入[type = checkbox]：选中

Answer 2

以下是我在上一篇评论中所讨论的内容

＆＃13;

$(document).ready(function() {
  $("form").submit(function(e) {
    var numberchecked = $('input:checkbox:checked').length;
    var min = 3
    if (numberchecked < min) {

      console.log('Not Submitting');
      return false;
    }
    console.log('Submitting');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="my-form" action="google.com">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="submit">
</form>

＆＃13;

在检查复选框的数量后，防止表单提交

2 个答案: