Blockieren Sie das Formular, wenn kein Kontrollkästchen aktiviert ist

Question

Ich brauche Hilfe, weil verwirrt, wie Formular senden blockieren, wenn kein Kontrollkästchen aktiviert ist.

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>

Die alle Kontrollkästchen Codeprüfung. Ich will es nicht. Ich möchte, wenn ein Kontrollkästchen aktiviert ist, kann das Formular senden. Wenn niemand überprüft, Kaution einreichen.

Bitte helfen.

Answer 1

Es gibt einen Weg, dies zu tun, die viel einfacher als das, was Sie tun. Es ist nicht notwendig, eine Schleife zu machen. Verwenden Sie einfach den Pseudoklassen-Selektor :checked, um eine Gruppe von Knoten zu erhalten, die überprüft werden, und überprüfen Sie die .length der resultierenden Menge von Knoten. Wenn .length0 ist, wurden keine Kontrollkästchen aktiviert.

$('#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

Das erste Problem von dieser Linie kommt:

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

werden soll:

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

Da value enthält den Wert des ausgewählten Kontrollkästchen nicht das Objekt, so wird $(value) nicht funktionieren.

Dann, wenn Sie mit mindestens einer Checkbox einreichen möchten können Sie die Länge der überprüften Eingang ist wie überprüfen:

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

Hoffnung, das hilft.

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>

Answer 3

dies versuchen, keine Notwendigkeit zu erklären, ich denke:

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 4

Da Submit-Button steuert Formular abgesendet haben, ich seine bin Steuerung aktivieren/deaktivieren Status basierend auf Kontrollkästchen klicken

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(); 
 
     } 
 
    } 
 
    } \t

<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>