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 相关文章推荐
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
Vue简单实现原理详解
May 07 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
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
JAVASCRIPT keycode总结
2009/02/04 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
python实现验证码识别功能
2018/06/07 Python
Win8下python3.5.1安装教程
2020/07/29 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
电工工作职责范本
2014/02/22 职场文书
公司总经理岗位职责
2014/03/15 职场文书
大学生求职计划书
2014/04/30 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书