jquery实现复选框联动

来源：互联网发布：mp3播放软件ipad版编辑：程序博客网时间：2024/06/08 13:24

<!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属性移除。

0 0