编程论坛 » JavaScript论坛 » 请教有关checkbox级联问题

iabcz 发表于 2008-4-25 10:10

请教有关checkbox级联问题

下面这段js是有关checkbox的父子级联，现在我想要如果一个子checkbox是disabled，则级联对这个子checkbox不起作用，在下面这段js的基础上如何作修改呀？
小弟对javascript不是很熟悉呀，请教了！
function CheckboxGroup(){
    var arrelement = document.all;
    var i=0;
    while(i <arrelement.length){
        var forgroupattrib = arrelement[i].getAttribute('forcheckboxgroup');
        if(forgroupattrib != null && forgroupattrib != ''){
             arrelement[i].setAttribute('groupmember',_getGroupMember(arrelement[i]));
            if(arrelement[i].tagName.toLowerCase() == 'input' && arrelement[i].type == 'checkbox'){
                 arrelement[i].onclick=function(){
                    var groupmember = this.getAttribute('groupmember');
                    var i = 0;
                    while(i <groupmember.length){
                         groupmember[i].checked = this.checked;
                         i++;
                     }

                 }
             }
             _setState(arrelement[i]);
         }
         i++;
     }
}

function _getGroupMember(o){
    var groupname = o.getAttribute('forcheckboxgroup');
    var items = new Array;
    var inputs = document.getElementsByTagName('input');
    var i=0;
    while(i <inputs.length){
        if(inputs[i].type == 'checkbox'){
            var groupattrib = inputs[i].getAttribute('group');
            if(groupattrib == groupname){
                 items[items.length] = inputs[i];
                var master = inputs[i].getAttribute('groupmaster');
                if (master == null) {
                     master = new Array;
                     master[0] = o.uniqueID;
                     inputs[i].setAttribute('groupmaster', master);
                 }
                else{
                     master[master.length] = o.uniqueID;
                 }
                 inputs[i].onpropertychange = function(){
                    if (event.propertyName == 'checked') {
                        var arro = this.getAttribute('groupmaster');
                        var i = 0;
                        while (i  < arro.length) {
                             _setState(document.getElementById(arro[i]));
                             i++;
                         }
                     }
                 }
             }
         }
         i++;
     }
    return items;
}

function _setState(o){
    var master = o;
    if(master!=null){
        var chkselall = true;
        var chknosel = true;
        var groupmember = master.getAttribute('groupmember');
        var i = 0;
        while(i <groupmember.length){
            if(chkselall)chkselall = groupmember[i].checked;
            if(chknosel)chknosel = !groupmember[i].checked;
             i++;
         }
        if(master.tagName.toLowerCase() == 'input'&&master.type=='checkbox'){
            if (chkselall) {
                 master.indeterminate = false;
                 master.checked = true;
             }
            if (chknosel) {
                 master.indeterminate = false;
                 master.checked = false;
             }
            if(!chkselall&&!chknosel)master.indeterminate = true;
         }
        else{
             master.disabled = chknosel;
         }
     }
}

window.attachEvent('onload',CheckboxGroup);

在HTML中显示
   <input type="checkbox" forcheckboxgroup="abc">A <br>
&nbsp;   <input type="checkbox" group="abc">a <br>
&nbsp;   <input type="checkbox" group="abc">b <br>
&nbsp;   <input type="checkbox" group="abc" disabled="disabled">c <br>
现在在勾选A时，a，b都选上，但c不能被勾选。
不能去掉c的group="abc"这个属性

ayue222 发表于 2008-4-25 11:02

while(i <groupmember.length&&!groupmember[i].disabled)
加上 &&!groupmember[i].disabled

iabcz 发表于 2008-4-25 11:12

不行呀，这样做效果是达到了，但A只能点选一次就不能改了

ayue222 发表于 2008-4-25 11:18

哦。。
那下面这里
while(i <inputs.length&&!inputs[i].disabled){
加上&&!inputs[i].disabled

iabcz 发表于 2008-4-25 11:40

这样修改功能达到了，但是还有失去了一个效果
修改前如果子节点c的默认为checked，disabled，父节点A的checkbox默认应该有一个部分子节点选中的效果。但是现在修改后没有了，怎么才能功能和效果都达到

ayue222 发表于 2008-4-25 12:01

。。。。搞不清楚还有这样的效果。。
要这样的话 while (i  < arro.length&&!arro[i].disabled)
加上&&!arro[i].disabled

把这个 while(i <inputs.length&&!inputs[i].disabled) 的
&&!inputs[i].disabled 去掉

iabcz 发表于 2008-4-25 12:34

晕，这样改又成了A只能点选一次就不能改了。这段代码好像就是那个效果的
if(master.tagName.toLowerCase() == 'input'&&master.type=='checkbox'){
            if (chkselall) {
                 master.indeterminate = false;
                 master.checked = true;
             }
            if (chknosel) {
                 master.indeterminate = false;
                 master.checked = false;
             }
            if(!chkselall&&!chknosel)master.indeterminate = true;
         }
        else{
             master.disabled = chknosel;
         }

ayue222 发表于 2008-4-25 13:33

。。。。。你自己想想你的逻辑。。。。本来就是冲突的。。

查看完整版本: 请教有关checkbox级联问题