如何限制checkbox最多勾选个数
来源:互联网 发布:js ajax视频教程 编辑:程序博客网 时间:2024/06/05 15:10
直接上代码,分jsp和javascript两部分,以最多勾选6个为例,样式可能会乱,当做例子而已
jsp
<ul class="key-word-ul">
<li class="key-word-li">
<input type="checkbox" id='checkC1' name='checkC' />
<label for="checkC1"> 严谨 </label>
</li>
<li class="key-word-li">
<input type="checkbox" id='checkC2' name='checkC' />
<label for="checkC2"> 稳重 </label>
</li>
<li class="key-word-li">
<input type="checkbox" id='checkC3' name='checkC' />
<label for="checkC3"> 善于分析 </label>
</li>
<li class="key-word-li">
<input type="checkbox" id='checkC4' name='checkC' />
<label for="checkC4"> 勤奋 </label>
</li>
<li class="key-word-li">
<input type="checkbox" id='checkC5' name='checkC' />
<label for="checkC5"> 将心比心 </label>
</li>
<li class="key-word-li">
<input type="checkbox" id='checkC6' name='checkC' />
<label for="checkC6"> 精细 </label>
</li>
<li class="key-word-li">
<input type="checkbox" id='checkC7' name='checkC' />
<label for="checkC7"> 快乐 </label>
</li>
<li class="key-word-li">
<input type="checkbox" id='checkC8' name='checkC' />
<label for="checkC8"> 慎重 </label>
</li>
<li class="key-word-li">
<input type="checkbox" id='checkC9' name='checkC' />
<label for="checkC9"> 分类 </label>
</li>
</ul>
javascript
$('input[type=checkbox]').click(
function() {
var clickindex = $(this).parent('.key-word-li').index();
$("input[name='checkC']").attr('disabled', true);
$(".key-word-li").eq(clickindex).children("label").css({
'color' : '#fff',
'background-color' : '#f09049'
});
if ($("input[name='checkC']:checked").length >= 6) {
$("input[name='checkC']:checked").attr('disabled',
false);
} else {
var state = $(".key-word-li").eq(clickindex).children(
"input").prop("checked");
if (state == true) {
$(".key-word-li").eq(clickindex).children("label")
.css({
'color' : '#fff',
'background-color' : '#f09049'
});
} else {
$(".key-word-li").eq(clickindex).children("label")
.css({
'color' : '#000',
'background-color' : '#fff'
});
}
$("input[name='checkC']").attr('disabled', false);
}
});
- 如何限制checkbox最多勾选个数
- js限制checkbox选中个数
- jQuery限制 checkBox 选择个数
- 常用js脚本 AJAX 手机号验证 限制checkbox 勾选个数 利用AJAX 做电话号码验证
- React实现限制checkBox的点击个数
- 如何在c#winform的文本框限制只能输入汉字,并且汉字的个数最多不能超过4个!
- js限制checkbox选中个数以限制六个为例
- jquery限制复选框个数最多为3个
- 一个多选题限制最多只能选N个,CheckBoxList 如何判断
- 如何控制checkbox的选中个数
- 如何限制文本框输入的个数
- 如何限制textview显示文字的个数
- 如何控制checkbox的选中个数 ,name值不同,
- js限制checkbox选项个数与php获取多个checkbbox
- 如何给EditText定焦点隐藏软盘限制字符个数
- EditText字符个数限制如何操作 两种方法
- js限制最多三位数字
- 求约数个数最多问题
- PostgreSQL新手入门
- 转载资深程序员的总结经验
- selenium之unittest批量执行测试用例、生成html报告
- 嵌入式-1 uboot模式烧写镜像文件
- 【LintCode】数组的全排序(1)
- 如何限制checkbox最多勾选个数
- OpenCv--Mat矩阵(图像容器)的创建及CV_8UC1,CV_8UC2等参数详解
- 带空格或逗号的字符串和基础数据类型的互相转换
- Quartz框架学习之一-快速入门
- Mac brew 升级gradle 后降级
- MySQL的保留关键字,使用时尽量避免
- Redis主从复制
- 移动WebApp开发-jQuery Mobile入门
- 常见的加密算法