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中的几个运算符
Jun 29 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
Vue修改项目启动端口号方法
Nov 07 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框架Phpbean说明
2008/01/10 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
javascript eval函数深入认识
2009/02/21 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
建筑工地质量标语
2014/06/12 职场文书
授权委托书(完整版)
2014/09/10 职场文书
绿色环保倡议书
2015/04/28 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
百年校庆感言
2015/08/01 职场文书