jQuery多选框选择数量限制方法
更新时间：2017年02月08日 14:09:32 作者：每天都进步一点点
这篇文章主要为大家详细介绍了jQuery多选框选择数量限制方法，最多选择 三项 的上限已满, 其他选项将会变为不可选
在网上找到的，可以使用。由于刷新后，多选框会保留选中的，这时数量达到要求后还是可以选择的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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
使用jQuery提供的表单序列化方法可以很好的解决JSP表单中一个个传值的问题，下面有个示例，大家可以参考下2014-07-07
这篇文章主要介绍了jQuery表单域属性过滤器用法,实例分析了:checked、:enabled、:disabled:、selected等常用表单域属性过滤器使用技巧,需要的朋友可以参考下2015-02-02
本篇文章主要是对jQuery点击自身以外地方关闭弹出层的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
前些日子不是在做使用Jquery-UI实现一次拖拽多个选中的元素操作嘛，在持续完善这个组件时遇到了一个关于拖放排序的bug。今天就着图片和代码重现一下，也顺便告诉大家如何解决这个问题2016-12-12
在IE7~IE8这种不支持HTML5的浏览器上，是利用Flash嵌入的方式实现的签名处理，在支持的HTML5的浏览器上默认采用canvas标签处理签名，可以生成 PNG格式、SVG格式的签名图片。非常适合在IPAD等移动客户端上实现手写签名的，该插件基于JQuery2015-05-05
使用CDN和AJAX加速WordPress中jQuery的加载
这篇文章主要介绍了使用CDN和AJAX加速WordPress中jQuery的加载的方法,注意一下WordPress中以及CDN的Google连接在内地的网络问题,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了jQuery实现天猫商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
jQuery的bind的函数在实际应用其实不是特别多，只是他可以绑定一个事件，但不会即时触发，也可以通过unbind来解除绑定。2011-04-04
本文给大家介绍的是jquery中添加属性和删除属性的方法和具体的示例，有需要的小伙伴可以参考下2015-06-06
改变图片IMG的链接地址在某些特殊情况下实现特殊的功能还是比较不错的，下面为大家详细介绍下使用jquery改变图片IMG的链接地址，感兴趣的朋友可以参考下哈2013-06-06
最新评论