JavaScript

超轻量级php框架startmvc

jQuery多选框选择数量限制方法

更新时间:2020-04-21 01:19:20 作者:startmvc
在网上找到的,可以使用。由于刷新后,多选框会保留选中的,这时数量达到要求后还是可

在网上找到的,可以使用。由于刷新后,多选框会保留选中的,这时数量达到要求后还是可以选择的bug,在前面加个判断数量是否数量达到要求的处理就可以了。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(function(){

//加上判断是否达到数量要求
 if($(":checkbox").size()>=3){
 $(":checkbox").removeAttr("checked");
 $(":checkbox").attr("disabled","disabled");
 $(":checkbox").removeAttr("disabled");
 }

 var num = 0;
 $(":checkbox").each(function(){
 $(this).click(function(){
 if($(this)[0].checked) {
 ++num;
 if(num == 3) {
 //alert("最多选择 三项 的上限已满, 其他选项将会变为不可选.");
 $(":checkbox").each(function(){
 if(!$(this)[0].checked) {
 $(this).attr("disabled", "disabled");
 }
 });
 }
 } else {
 --num;
 if(num <= 2) {
 $(":checkbox").each(function(){
 if(!$(this)[0].checked) {
 $(this).removeAttr("disabled");
 }
 });
 }
 }
 });
 });
})
</script> 
</head>

<body>
<input type="checkbox" />上网<br />
<input type="checkbox" />旅游<br />
<input type="checkbox" />逛街<br />
<input type="checkbox" />游戏<br />
<input type="checkbox" />听歌<br />
<input type="checkbox" />购物<br />
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

jQuery限制多选框选择数量 jQuery多选数量限制 jquery多选框选中事件