直接上代码,分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);
}
});