Soumettre le formulaire seulement si au moins une case est cochée

je suis triyng pour valider un formulaire.
Dans ce formulaire, vous avez à choisir au moins un élément par des cases à cocher, et je ne peux pas être sûr à propos de leur quantité (cela dépend d'éléments nombre).
J'ai besoin d'activer la soumettre les commentaires si l'une ou plusieurs cases sont cochées, puis la désactiver si il n'ya pas de case cochée, comment puis-je faire?
Voici mon code:

<form id="booking">
<input type="checkbox" name="room1" class="roomselect"/>
<input type="checkbox" name="room2" class="roomselect"/>
<input type="checkbox" name="room3" class="roomselect"/>
<input type="submit" value="Request" id="subm" />
</form>
Ajouter un gestionnaire de soumission de vérifier if($('.roomselect').is(':checked')) si la valeur est false empêcher la soumission d'un formulaire

OriginalL'auteur user2132234 | 2014-03-21

  1. 9
    //dom ready handler
jQuery(function ($) {
    //form submit handler
    $('#booking').submit(function (e) {
        //check atleat 1 checkbox is checked
        if (!$('.roomselect').is(':checked')) {
            //prevent the default form submit if it is not checked
            e.preventDefault();
        }
    })
})
    Super! merci beaucoup!

    OriginalL'auteur Arun P Johny

  2. 2

    Vous pouvez utiliser :checked sélecteur avec .length pour trouver coché la case count:

    var len = $(".roomselect:checked").length;
if(len>0){
    //more than one checkbox is checked
 }

    Démo

    OriginalL'auteur Milind Anantwar

  3. 2

    La :vérifié sélecteur correspond à tous les éléments qui sont coché ou sélectionné.

    Vous pouvez essayer ce

    $("#subm").click(function(e){
        if($(".roomselect:checked").length == 0){
            e.preventDefault();
        }
    });

    OriginalL'auteur Yasser

  4. 2

    je vous suggère d'utiliser "bouton" au lieu de "envoyer".

    veuillez suivre ce

    HTML->

    <form id="booking" action="https://www.google.co.in/search">
      <input type="checkbox" value="facebook" name="q"/>
       <input type="checkbox" value="gmail" name="q"/>
       <input type="checkbox" value="stackoverflow" name="q"/>
<input type="button" value="Request" id="submit" />

    $(function(){

    $("#submit").click(function(e){

    var number_of_checked_checkbox= $("input[name=q]:checked").length;
    if(number_of_checked_checkbox==0){
        alert("select any one");
    }else{
        $("#booking").submit();
    }

         });
    });

    OriginalL'auteur Tuhin

  5. 0

    Vanille JavaScript équivalent de la jQuery façon, à l'aide document.querySelector

    if (document.querySelector('.roomselect:checked')) {
    //somethings checked
}

    Démo

    OriginalL'auteur Paul S.

  6. 0

    La méthode la plus simple serait avec javascript, heureusement que quelqu'un est déjà fait tout le travail ici (avec jQuery). Tout vous devez faire pour adapter cet exemple est de changer #form_check à #la réservation.

    Essentiellement à ce que l'exemple est en train de faire est de forcer lui-même avant de le soumettre action quand il voit l'un est tenté pour la forme, puis il effectue une recherche à l'intérieur de l'élément de formulaire pour toute case à cocher des éléments avec un contrôle de l'état et s'il ne peut trouver de tout est l'envoi d'un preventdefault pour arrêter tout ce que le client/navigateur par défaut de réponse à une action soumettre la demande serait ou sinon envoi en normal.

    Également en ce qui concerne les autres réponses, en utilisant === plus de sécurité et en renvoyant false vous donne un peu de redondance. Voici une discussion sur ce que le return false ajoute.

    En plus, ne pas utiliser cliquez sur() pour ce que vous potentiellement exécuter en cas d'utilisation où vous êtes techniquement la soumission du formulaire, mais ne sont pas réellement en cliquant sur elle, comme par exemple lorsque vous appuyez sur entrée

    OriginalL'auteur Jonathan Wommack

  7. 0

    essayer cette

    var checked = false;
$(function(){
    $('#subm').click(function(e){
        checkall();
        if(!checked){
            e.preventDefault();
        }
    });
    $('.roomselect').change(function(e){
        checkall();
    });
    checkall();
});
function checkall()
{
    checked = $('.roomselect:checked').length > 0;
    $('#subm').prop('disabled',!checked);
}

    OriginalL'auteur G Ravinder