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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
javaScript中indexOf用法技巧
Nov 26 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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+DBM的同学录程序(5)
2006/10/09 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
vuex直接赋值的三种方法总结
2018/09/16 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python实现倒计时的示例
2014/02/14 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python 移动光标位置的方法
2019/01/20 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
库房主管岗位职责
2013/12/31 职场文书
给面试官的感谢信
2014/02/01 职场文书
财务总监岗位职责
2014/03/07 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
生日祝酒词大全
2015/08/10 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
python实现的web监控系统
2021/04/27 Python
Python requests用法和django后台处理详解
2022/03/19 Python