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 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
Javascript玩转继承(三)
May 08 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
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
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python pyheatmap包绘制热力图
2018/11/09 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
Python中求对数方法总结
2020/03/10 Python
Python计算信息熵实例
2020/06/18 Python
Python库安装速度过慢解决方案
2020/07/14 Python
Python中logger日志模块详解
2020/08/04 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
11月升旗仪式讲话稿
2014/02/15 职场文书
文明生主要事迹
2014/05/25 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
会计求职自荐信
2014/06/20 职场文书
行政求职信
2014/07/04 职场文书
法院授权委托书范文
2014/08/02 职场文书
云台山导游词
2015/02/03 职场文书
如何使用pdb进行Python调试
2021/06/30 Python