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/Css 文件的代码
Jul 03 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
使用jquery如何获取时间
Oct 13 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
Angular4 ElementRef的应用
2018/02/26 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
市场部规章制度
2014/01/24 职场文书
上课玩手机检讨书
2014/02/08 职场文书
关于旅游的活动方案
2014/08/15 职场文书
擅自离岗检讨书
2014/09/12 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
家装业务员岗位职责
2015/04/03 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
pandas中关于apply+lambda的应用
2022/02/28 Python
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js