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 相关文章推荐
js异常捕获方法介绍
Apr 10 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
微信开发 微信授权详解
Oct 21 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
用JS实现选项卡
Mar 23 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
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的一些小问题
2010/07/03 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
基于vue.js无缝滚动效果
2018/01/25 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
python里 super类的工作原理详解
2019/06/19 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
宿舍打麻将检讨书
2014/01/24 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
新闻编辑求职信
2014/07/13 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
委托书格式要求
2015/01/28 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB