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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
属性的类型可以为：图片、文本框、按钮，然后选择需要设置的属性值：src、width、height、title、value等等，具体实现如下，感兴趣的朋友可以参考下哈2013-05-05
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
这篇文章主要介绍了jQuery动画显示和隐藏效果实现方法,并附带了demo源码供读者下载参考,涉及jQuery操作图片的显示,隐藏及淡入淡出等效果,需要的朋友可以参考下2015-12-12
这篇文章主要针对jQuery Validate表单验证为大家进行详细介绍，如何在class属性里面并定义错误信息的提示，感兴趣的小伙伴们可以参考一下2016-01-01
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
这篇文章主要介绍了JQuery+Bootstrap 自定义全屏Loading插件，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了jQuery实现百度登录框的动态切换效果,需要的朋友可以参考下2017-04-04
在QWrap群里讨论时，有同学问jquery/yui等已做到极致，我们有没必要再重复造一个叫QWrap的轮子？2011-02-02
下面小编就为大家带来一篇JQuery给select添加/删除节点的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
通常我们在使用ajax的时候，都避免不了和json这种轻巧的数据格式打交道。可是往往手动的去解析json，构建HTML，比较麻烦。现在有了这个插件，就能像Extjs那样使用模板解析json了。2010-10-10
jquery移除button的inline onclick事件(已测试及兼容浏览器)
这种方法在Google Chrome下正常工作，但是在IE的兼容模式下会马上调用reclick方法，这不是我们想要的效果;为了解决这个问题，我们可以换个思路，就是延迟绑定click事件2013-01-01
这篇文章介绍了jquery实现手风琴效果实例代码，有需要的朋友可以参考一下2013-11-11
最新评论