限制多选框选择数量

最新推荐文章于 2024-06-26 17:02:47 发布

每天都进步一点点

最新推荐文章于 2024-06-26 17:02:47 发布

阅读量5.2k

点赞数 1

分类专栏： JQ 文章标签：多选框限制数量

JQ 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>