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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
浅析javascript函数表达式
Feb 10 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 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
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
js图片预加载示例
2014/04/30 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
python Scrapy框架原理解析
2021/01/04 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
大学生村官工作感言
2014/01/10 职场文书
大学毕业生自我评价
2015/03/02 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
Linux安装apache服务器的配置过程
2021/11/27 Servers