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

在网上找到的，可以使用。由于刷新后，多选框会保留选中的，这时数量达到要求后还是可以选择的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多选框选中事件 # jQuery 获取多选框的值及多选框中文的函数 # jQuery实现的多选框多级联动插件 # jquery select多选框的左右移动具体实现代码 # jquery对单选框 # 多选框 # 文本框等常见操作小结 # 简单实现jQuery多选框功能 # jQuery对下拉框 # 单选框 # 多选框的操作 # jquery中表单多选框的一种巧妙写法 # jQuery模拟html下拉多选框的原生实现方法示例 # Jquery多选框互相内容交换的实例代码 # jQuery中实现prop()函数控制多选框(全选 # 反选) # jQuery实现获取多选框的值示例 # 将会 # 最多 # 可以使用 # 可选 # 可以选择 # 听歌 # 三项 # 大家多多 # 已满 # 就可以 # 无标题文档 # 多选 # 判断是否 # 在网上 # 在前面加 # head # meta # gt # lt # html

返回目录在线咨询

上一篇：PHP验证码怎么适配移动端_PHP移动端验证码适配【响应式】
下一篇：油画网站源码,买粮油哪个网站便宜？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求