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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
js实现字符全排列算法的简单方法
May 01 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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.ini中文版(1)
2006/10/09 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP实现小偷程序实例
2016/10/31 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JS实现弹性菜单效果代码
2015/09/07 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python迭代和迭代器详解
2016/11/10 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python线程中同步锁详解
2018/04/27 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
诚信承诺书
2015/01/19 职场文书
预备党员入党感想
2015/08/10 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技