直接上JS中的代码:
// 保存互斥的项目
var rule = [["角色1","角色2"],["角色3","角色4","角色5"]];
function check(obj){
var checkedVals = new Array();
// 取出所有选择项目
$("input[name='checkOptions']:checked").each(function() {
checkedVals.push($(this).next().text());
});
$.each(rule,function(index){
var item = $(this);
var flag = 0;
// 判断是否有互斥选项
for(i=0;i<item.length;i++){
if(contains(item[i], checkedVals)){
flag++;
}
}
// 显示互斥的项目,并提示
if(flag>=item.length){
var ruleLabel = rule[index];
var promote = "";
var labelSize = ruleLabel.length;
for(i=0;i<labelSize;i++){
if(i < labelSize - 1){
promote += '"' + ruleLabel[i] + '"和';
} else {
promote += '"' + ruleLabel[i] + '"';
}
}
alert(promote+"角色,不能同时选中!");
$(obj).prop({"checked":false});
return false;
}
});
}
function contains(obj,a) {
var i = a.length;
while (i--) {
if (a[i] == obj) {
return true;
}
}
return false;
}
JSP中,checkbox的代码为:
<input type="checkbox" name="checkOptions" value="0" onclick ="check(this)"/>角色1
<input type="checkbox" name="checkOptions" value="1" onclick ="check(this)"/>角色2
<input type="checkbox" name="checkOptions" value="2" onclick ="check(this)"/>角色3
<input type="checkbox" name="checkOptions" value="3" onclick ="check(this)"/>角色4
<input type="checkbox" name="checkOptions" value="4" onclick ="check(this)"/>角色5