停止提交表单，除非选中指定数量的复选框

我创建的页面允许用户访问我网站的某个部分，如果他们按正确的顺序点击25个复选框中的8个。停止提交表单，除非选中指定数量的复选框

首先感谢Reigel的原始代码，他拿走了我所写的并重写了它，比我刚开始使用的方式更好。还要感谢Peter Ajtai帮助我优化代码。

我的问题是，如何禁用提交，或停止提交表单，除非至少有8个复选框已被选中，还有一个帐户有人取消选中第八个复选框，这会再次禁用表单提交。

这里是一个真人版：

我的代码如下：

<body onLoad="clearForms()" onUnload="clearForms()"> 

<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 

<form id="form1" name="form1" method="post" action="check_combination.php"> 
<table width="200" border="1" align="center"> 

<tr> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="1" /></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="2"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="3"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="4"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="5"/></td> 
</tr> 

<tr> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="6"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="7"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="8"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="9"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="10"/></td> 
</tr> 

<tr> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="11"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="12"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="13"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="14"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="15"/></td> 
</tr> 

<tr> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="16"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="17"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="18"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="19"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="20"/></td> 
</tr> 

<tr> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="21"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="22"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="23"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="24"/></td> 
<td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="25"/></td> 
</tr> 

<tr> 
<td height="23" colspan="5" align="center" valign="middle" class="label"></td> 
</tr> 

<tr> 
<td height="28" colspan="5" align="center" valign="middle"><input type="button" value="Test length" id="test" /></td> 
</tr> 

<tr> 
<td height="28" colspan="5" align="center" valign="middle"><input type="submit" name="button" id="button" value="Submit" /></td> 
</tr> 

<tr> 
<td height="28" colspan="5" align="center" valign="middle"><input type="button" name="button" id="button2" value="Test hidden input value" /></td> 
</tr> 

</table> 

<input name="result" type="hidden" id="result" /> 

</form> 

</body>

和JavaScript：

function clearForms() { 
    var i; 
    for (i = 0; (i < document.forms.length); i++) { 
     document.forms[i].reset(); 
    $(':checkbox[name=checkbox]:disabled').attr('disabled', false); 

    } 
} 


//initial checkCount of zero 
var checkCount = 0; 

//maximum number of allowed checked boxes 
var maxChecks = 8; 

$(document).ready(function() { 

clearForms(); 

var $nameCheckbox = $('input:checkbox[name=checkbox]'); 

    $nameCheckbox.click(function() { 

     //update checkCount 
     checkCount = $('input:checked').length; 

     if (checkCount >= maxChecks) { 
      //alert('you may only choose up to ' + maxChecks + ' options'); 
      $nameCheckbox.not(':checked').attr('disabled', true); 
     } else { 
      $nameCheckbox.filter(':disabled').attr('disabled', false); 
     } 

     if (this.checked) { 
      $("td.label").append('<label>' + this.value + ' </label>'); 
     } else { 
      $("td.label").find(':contains(' + this.value + ')').remove(); 
     } 

     $('input[name="result"]').val($("td.label").text()); 

    }); 


    $("#test").click(function() { 
     alert($('input:checked').length) 
    }); 

    $('#button2').click(function() { 
     alert($('input[name="result"]').val()); 
    }); 

});

来源

2010-10-05 James

在你$(document).ready()处理程序添加一个.submit()事件处理程序<form>，像这样：

$("#form1").submit(function(e) { 
    if($("input:checkbox:checked").length < 8) { 
    alert("You must select at least 8 things!"); 
    e.preventDefault(); 
    } 
});

event.preventDeault()调用阻止表单提交，如果选中的复选框的计数小于8，因为它在提交时被检查，这里没有启用/禁用欺骗......我们只是在右边检查时间。

来源

2010-10-05 02:58:10

停止提交表单，除非选中指定数量的复选框

回答

相关问题