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 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
JQuery实现定时刷新功能代码
2017/05/09 jQuery
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
毕业生造价工程师求职信
2013/10/17 职场文书
高校毕业生登记表自我鉴定
2013/11/03 职场文书
自荐信范文
2013/12/10 职场文书
企业内控岗位的职责
2014/02/07 职场文书
四风存在的原因分析
2014/02/11 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
优秀班集体申报材料
2014/12/25 职场文书
支教个人总结
2015/03/04 职场文书
工作时间调整通知
2015/04/24 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
php png失真的原因及解决办法
2021/11/17 PHP