仅在选中至少一个复选框时才提交表单

我很想validation表格。 在这种forms中,你必须通过复选框选择至少一个元素,我不能确定它们的数量(它取决于元素数量)。 如果选中了一个或多个复选框,我需要启用提交输入,如果没有选中复选框,则禁用它,我该怎么办? 这是我的代码:

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

:checked选择器将匹配选中或选中的所有元素。

你可以试试这个

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

我建议你使用“按钮”而不是“提交”。

请关注此

HTML的“

 

$(函数(){

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

您可以使用:checked selector和.length来查找已选中的复选框计数:

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

演示

Vanilla JavaScript相当于jQuery方式,使用document.querySelector

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

演示

最简单的方法是使用javascript,幸运的是有人已经完成了所有工作(使用jQuery)。 您需要做的就是调整该示例,将#form_check更改为#booking。

基本上该示例正在做的是在提交操作之前强制自己,当它看到正在为表单尝试一个然后它在表单元素内搜索具有已检查状态的任何复选框元素,如果它找不到任何正在发送一个preventdefault停止客户端/浏览器对提交操作请求的默认响应,或者只是正常发送。

另外关于其他答案,使用===更安全,返回false会给你一些冗余。 这里讨论返回false添加的内容。

另外,请不要使用click(),因为您可能会遇到技术上提交表单但实际上没有单击它的用例,比如当您按Enter键时

试试这个

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