jquery实现复选框联动

最新推荐文章于 2022-04-19 23:17:52 发布

daxiang12092205

最新推荐文章于 2022-04-19 23:17:52 发布

阅读量9.2k

点赞数

分类专栏：前端文章标签： jquery操作复选框

本文链接：https://blog.csdn.net/daxiang12092205/article/details/24577907

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html> 
<head> 
<title></title> 
<style type='text/css'>
</style>
</head> 
<body>
	<input name="input1" type="checkbox" value="input1">input1</input>
	<input name="input2" type="checkbox" value="input2">input2</input>
	<input name="input3" type="checkbox" value="input3">input3</input>
	<input name="input4" type="checkbox" value="input4">input4</input>
</body> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript'> 
	$('input[type="checkbox"]').click(function(){
		// 获取当前复选框在所有复选框中索引
		var index = $('input[type="checkbox"]').index(this);
		var arrStage = ['input4','input3','input2'];
		var length = arrStage.length;

		for(var i=length-index; i<length; i++){
			if($('input[type="checkbox"][name="'+ arrStage[i] +'"]').prop('checked')){
				// 根据type和name找到复选框-获取该复选框前所有复选框-选中所有复选框-只读
				$('input[type="checkbox"][name="'+ arrStage[i] +'"]').prevAll('input[type="checkbox"]')
					.prop('checked',true).attr('disabled','true');
			} else{
				$('input[type="checkbox"][name="'+ arrStage[i] +'"]').prevAll('input[type="checkbox"]')
					.removeAttr('disabled');
			}
		}
	});
</script> 
</html>

运行效果：选中第N个复选框时，前面N-1个复选框置灰，不可更改。chrome ie8下均正常。

注：在j2ee开发中，复选框多为form的一个字段，采用此方案实现所需效果，提交form时，后台获取不到部分复选框的值。原因：复选框设置了disabled属性，提交form时，form不再读取标签，而使用其默认值。解决：提交form前，将所有复选框的disabled属性移除。