Submit form only if at least one checkbox is checked

Question

i\'m triyng to validate a form. In this form you\'ve to choose at least one element by checkboxes, and I can\'t be sure about their quantity (it depends by elements number).

Answer 1

try this

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);
}

Answer 2

i suggest you to use "button" instead of "submit".

please follow this

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

         });
    });

Answer 3

The :checked selector will Match all elements that are checked or selected.

You could try this

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

Answer 4

The easiest method would be with javascript, fortunately someone's already done all the work here (with jQuery). All you'd need to do to adapt that example is to change #form_check to #booking.

Essentially what that example is doing is forcing itself before the submit action when it sees one is being tried for the form then it's searching inside the form element for any checkbox elements with a checked state and if it can't find any is sending a preventdefault to stop whatever the client/browser's default response to a submit action request would be or otherwise just sending as normal.

Also regarding the other answers, using === is more secure and returning false gives you some redundancy. Here's some discussion on what the return false adds.

Additionally don't use click() for this as you potentially run into use cases where you're technically submitting the form but aren't actually clicking it, like say when you hit enter

Answer 5

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

Answer 6

You can use :checked selector along with .length to find checked checkbox count:

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

Demo