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 相关文章推荐
遍历jquery对象的代码分享
Nov 02 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 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的session过期设置
2013/06/29 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
PHP7 windows支持
2021/03/09 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
浅析node.js中close事件
2014/11/26 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
python中os.remove()用法及注意事项
2021/01/31 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
2014年教师节活动总结
2014/08/29 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript