jquery限制复选框个数最多为3个

最新推荐文章于 2021-02-24 04:09:39 发布

原创最新推荐文章于 2021-02-24 04:09:39 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery实现一个功能，即限制用户在一组复选框中最多只能勾选3个选项。通过监听复选框的点击事件，当已选中的复选框数量达到3个时，将所有复选框设置为禁用状态，如果用户取消选中一个，其他复选框将重新启用，允许再次选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>
<script type="text/javascript" src="../jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$('input[type=checkbox]').click(function() {//checkbox的input标签点击事件
$("input[name='apk[]']").attr('disabled', true);//设置name为apk[]的input标签的属性为true,表示不可选
if ($("input[name='apk[]']:checked").length >= 3) {//选中个数大于3
$("input[name='apk[]']:checked").attr('disabled', false);
} else {
$("input[name='apk[]']").attr('disabled', false);
}
});

})
</script>