如果没有选中任何复选框，则阻止表单提交

Question

我需要帮助，因为如果没有选中任何复选框，我很困惑如何阻止表单提交。

var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');

$form.on('submit', function(e) {
  $.each($checkbox, function(index, value) {
    if (!$(value).is(':checked')) {
      alert('Opps! You not select friends.');
      e.preventDefault();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="send-invite-form">
  <input type="checkbox" class="invitation-friends" value="875" />
  <input type="checkbox" class="invitation-friends" value="394" />
  <button type="submit">Send</submit>
    </form>

代码检查每个复选框。我不想要它。我希望如果选中一个复选框，则可以提交表单。如果没有人检查，就提交保释。

请帮忙。

Answer 1

有一种方法可以比您正在做的简单得多。没有必要循环。只需使用

:checked

伪类选择器来获取一组已检查的节点，并检查结果节点集的

.length

。如果

.length

为

0

，则表示未选中任何复选框。

$( '#send-invite-form' ).on('submit', function(e) {
   if($( 'input[class^="invitation-friends"]:checked' ).length === 0) {
      alert( 'Oops! You not select friends.' );
      e.preventDefault();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send-invite-form">
     <input type="checkbox" class="invitation-friends" value="875" />
     <input type="checkbox" class="invitation-friends" value="394" />

     <button type="submit">Send</submit>
</form>

Answer 2

试试这个，我认为不需要解释：

var found = false;
$.each( $checkbox, function(index, value) {
    if( $(this).is(':checked') ) {
        found = true;
    }
});
if(!found){
    alert( 'Opps! You not select friends.' );
    e.preventDefault();
}

Answer 3

由于提交按钮控制表单提交，我根据复选框单击来控制其启用/禁用状态

window.onload = checkBoxEventAndOnSubmitFunctionality();

  function checkBoxEventAndOnSubmitFunctionality() {
    let checkBoxes = document.getElementsByClassName('invitation-friends');
    let checkBoxChecked = 0;
    
    for(i=0;i<checkBoxes.length;i++) {
       checkBoxes[i].onclick = function(e) {
          if(e.path[0].checked) checkBoxChecked += 1;
          else checkBoxChecked -= 1;
       }
    }
    document.getElementById("send-invite-form").onsubmit = function(e) {
      if(checkBoxChecked !=0) {
        alert("can submit");
         document.getElementById("send-invite-form").submit();
      }
      else {
        alert("can NOT submit");
        e.preventDefault();
      }
    }
  }	

<form id="send-invite-form" onsubmit="checkForCheckBoxes" method="POST">
     <input type="checkbox" class="invitation-friends" value="875" />
     <input type="checkbox" class="invitation-friends" value="394" />

     <button type="submit" id="submitButton">Send</button>
</form>

Answer 4

第一个问题来自这一行：

if ( !$(value).is(':checked')) {

应该是：

if ( !$(this).is(':checked')) {

由于

value

包含所选复选框的值而不是对象，因此

$(value)

将不起作用。

然后，如果您想提交至少一个复选框，您可以检查选中输入的长度，例如：

if( $('input.invitation-friends:checked').length == 0 )
{
    return false; 
}

var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');

$form.on('submit', function(e) {
  if( $('input.invitation-friends:checked').length == 0 )
  {
    return false; 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="send-invite-form">
  <input type="checkbox" class="invitation-friends" value="875" />
  <input type="checkbox" class="invitation-friends" value="394" />

  <button type="submit">Send</submit>
</form>