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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 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缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
Python获取apk文件URL地址实例
2013/11/01 Python
Python实现建立SSH连接的方法
2015/06/03 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
pandas针对excel处理的实现
2021/01/15 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
应聘美工求职信
2013/11/07 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
篝火晚会主持词
2014/03/25 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
大学生创业事迹材料
2014/12/30 职场文书
幼儿教师个人总结
2015/02/05 职场文书
检察院起诉书
2015/05/20 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书