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函数中的arguments参数
Aug 01 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
js简单实现交换Li的值
May 22 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP array 的加法操作代码
2010/07/24 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
js控制input输入字符解析
2013/12/27 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
Vue3 源码导读(推荐)
2019/10/14 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
python解析模块(ConfigParser)使用方法
2013/12/10 Python
python计算圆周率pi的方法
2015/07/11 Python
Python第三方库的安装方法总结
2016/06/06 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python3实现猜数字游戏
2020/12/07 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
《充气雨衣》教学反思
2014/04/07 职场文书
2014年三万活动总结
2014/04/26 职场文书
跑操口号
2014/06/12 职场文书
公证委托书标准格式
2014/09/11 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
利用Python+OpenCV三步去除水印
2021/05/28 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers