JQuery限制复选框checkbox可选中个数的方法


Posted in Javascript onApril 20, 2015

本文实例讲述了JQuery限制复选框checkbox可选中个数的方法。分享给大家供大家参考。具体分析如下:

由于项目需要限制可批量操作的文件个数 所以写了一段小代码
如果选中个数大于允许的最大个数 其他复选框不能选择
如果小于则所有复选框都能选择

<script type="text/javascript">
 $(document).ready(function() {
  $('input[type=checkbox]').click(function() {
   $("input[name='apk[]']").attr('disabled', true);
   if ($("input[name='apk[]']:checked").length >= 3) {
    $("input[name='apk[]']:checked").attr('disabled', false);
   } else {
    $("input[name='apk[]']").attr('disabled', false);
   }
  });
 })
</script>
<ul>
 <li>
  <input type="checkbox" name="apk[]" value=1 />
  APK1
 </li>
 <li>
  <input type="checkbox" name="apk[]" value=2 />
  APK2
 </li>
 <li>
  <input type="checkbox" name="apk[]" value=1 />
  APK3
 </li>
 <li>
  <input type="checkbox" name="apk[]" value=4 />
  APK4
 </li>
 <li>
  <input type="checkbox" name="apk[]" value=6 />
  APK5
 </li>
 <li>
  <input type="checkbox" name="apk[]" value=7 />
  APK6
 </li>
 <li>
  <input type="checkbox" name="apk[]" value=8 />
  APK7
 </li>
</ul>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 #Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 #Javascript
javascript中callee与caller的区别分析
Apr 20 #Javascript
javascript正则表达式中的replace方法详解
Apr 20 #Javascript
javascript正则表达式基础知识入门
Apr 20 #Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 #Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 #Javascript
You might like
ASP和PHP都是可以删除自身的
2007/04/09 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
Python使用分布式锁的代码演示示例
2018/07/30 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
python实现按关键字筛选日志文件
2019/12/24 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
简单的Python人脸识别系统
2020/07/14 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
大学生党员个人剖析材料
2014/10/08 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS