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 动态创建VML的方法
Oct 14 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 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生成随机数或者字符串的代码
2008/09/05 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php面向对象值单例模式
2016/05/03 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python将unicode和str互相转化的实现
2020/05/11 Python
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
幼儿教师国培感言
2014/02/19 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL