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


Posted in Javascript onFebruary 08, 2017

在网上找到的,可以使用。由于刷新后,多选框会保留选中的,这时数量达到要求后还是可以选择的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>

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

Javascript 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 #Javascript
简单实现bootstrap选项卡效果
Feb 08 #Javascript
Bootstrap导航条学习使用(一)
Feb 08 #Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 #Javascript
Javascript中的神器——Promise
Feb 08 #Javascript
jquery获取下拉框中的循环值
Feb 08 #Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 #Javascript
You might like
非常不错的MySQL优化的8条经验
2008/03/24 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
扩展String功能方法
2006/09/22 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
python打印异常信息的两种实现方式
2019/12/24 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
nohup的用法
2012/11/26 面试题
工厂仓管员岗位职责
2014/01/01 职场文书
物业工作计划书
2014/01/10 职场文书
新学期家长寄语
2014/01/19 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
保险经纪人求职信
2014/03/11 职场文书
求职教师自荐书
2014/06/19 职场文书
会计专业求职信
2014/08/10 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
学校捐款活动总结
2015/05/09 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang