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). I need to enable the submit input if one or more checkboxes are checked, and disable it if there aren't any checkbox checked, how can I do? Here's my 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>

Add a submit handler check `if($('.roomselect').is(':checked'))` if false prevent form submission — Arun P Johny, Mar 21 '14 at 11:09

score 11 · Accepted Answer · answered Mar 21 '14 at 11:11

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

score 2 · Answer 2 · answered Mar 21 '14 at 11:08

2

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

answered Mar 21 '14 at 11:08

Milind Anantwar

81,290
25
94
125

score 2 · Answer 3 · answered Mar 21 '14 at 11:10

2

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

answered Mar 21 '14 at 11:10

Yasser Shaikh

46,934
46
204
281

score 2 · Answer 4 · answered Mar 21 '14 at 11:47

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

         });
    });

score 0 · Answer 5 · answered Mar 21 '14 at 11:11

0

Vanilla JavaScript equivalent of the jQuery way, using document.querySelector

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

Demo

answered Mar 21 '14 at 11:11

Paul S.

64,864
9
122
138

score 0 · Answer 6 · edited May 23 '17 at 12:32

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

score 0 · Answer 7 · answered Mar 21 '14 at 11:30

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

score 0 · Answer 8 · answered Jun 12 '20 at 10:45

$("#form_id").submit(function(e) {        
    var totalChecked = $('#div_id:input[type="checkbox"]:checked').length;        
    if(totalChecked < 1)
    {            
        alert('Please select at least one checkbox before submit');
        return false;
    }  

});

Submit form only if at least one checkbox is checked

8 Answers8

Linked