且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

选择另一个复选框时如何启用/禁用复选框?

更新时间:2023-01-07 08:45:56

总而言之,不是太难.

http://jsfiddle.net/A5TGf/19/

HTML:

<form action="./" id="checkForm" method="post">
    <fieldset>
        <label for="foo">foo</label>
        <input type="checkbox" id="foo" value="foo" />
        <label for="bar">bar</label>
        <input type="checkbox" id="bar" value="bar" />
        <label for="baz">baz</label>
        <input type="checkbox" id="baz" value="baz" />
    </fieldset>
</form>

JS:

var form = document.getElementById("checkForm");
form.onclick = delegateFormClick;

addChangeHandlers(form);

function addChangeHandlers(form)
{
   for(var i=0;i<form.elements.length;i++)
   {
       var element = form.elements[i];
       if(element.tagName === "INPUT" && element.type === "checkbox")
       {
           if(!element.onchange)
           {
               element.onchange = checkBoxChanged;   
           }
       }
   }  
}

function delegateFormClick(evt)
{
    var target;
    if(!evt)
    {
        //Microsoft DOM
        target = window.event.srcElement;
    }else if(evt)
    {
        //w3c DOM
        target = evt.target;
    }
    if(target.nodeType === 1 && target.tagName === "INPUT" && target.type === "checkbox")
    {
        if(target.checked)
        {
            disableCheckBoxes(target.id, document.getElementById("checkForm"));
        }else if(!target.checked)
        {
            enableCheckBoxes(document.getElementById("checkForm"));
        }  
    }
}

function checkBoxChanged()
{
    if(this.checked)
    {
       disableCheckBoxes(this.id, document.getElementById("checkForm"));
    }else if(!this.checked)
    {
        enableCheckBoxes(document.getElementById("checkForm"));  
    }
}

function disableCheckBoxes(id, form)
{
    var blacklist = [];
    if(id)
    {
        switch(id)
        {
            case "foo":
            blacklist = ["bar", "baz"];
            break;
            case "bar":
            blacklist = ["foo"];
            break;
            case "baz":
            blacklist = ["foo", "bar"];
            break;
        }   
    }else
    {
        throw new Error("id is needed to hard-wire input blacklist");   
    }
    for(var i=0;i<blacklist.length;i++)
    {
        var element = document.getElementById(blacklist[i]);
        if(element && element.nodeType === 1)
        {
            //check for element
            if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
            {
                element.disabled = "disabled";
            }
        }else if(!element || element.nodeType !== 1)
        {
            throw new Error("input blacklist item does not exist or is not an element");
        }
    }   
}

function enableCheckBoxes(form)
{
    for(var i=0;i<form.elements.length;i++)
    {
        var element = form.elements[i];
        if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
        {
            element.disabled = "";
        }
    }   
}

关于我正在做的事情的一些快速笔记:

Some quick notes on what I'm doing:

  1. 我正在使用事件委托来最小化事件处理程序的数量.表单侦听冒泡的点击事件,然后根据点击的元素及其 checked DOM 属性调用一个函数.
  2. 我正在遍历 HTMLFormElement.elements 集合以轻松访问复选框.
  3. 如果复选框不是目标复选框,我会将 disabled DOM 属性设置为禁用".
  4. 如果未选中任何复选框,我将在复选框上将 disabled DOM 属性设置为 ""(空字符串).
  5. 如果用户通过 onchange 处理程序通过 Tab 键/输入或其他方法选择复选框,这也适用.
  6. 这段代码应该可以在 IE 中运行,尽管我在工作中通过 Wine 使用 IE 时遇到了一些严重的问题,所以我必须稍后进行测试.
  7. 它使用黑名单",这是一个数组,其中包含单击相应复选框时不想启用的复选框的 ID.
  1. I'm using event delegation to minimize the amount of event handlers. The form listens for a click event bubbling up, then calls a function depending on which element was clicked and its checked DOM property.
  2. I'm traversing the HTMLFormElement.elements collection to easily access the checkboxes.
  3. I'm setting the disabled DOM property to "disabled" on the checkbox if it's not the target checkbox.
  4. I'm setting the disabled DOM property to "" (an empty string) on the checkbox if no checkboxes are checked.
  5. This also works if the user selects the checkbox by tabbing/entering or another method via the onchange handler.
  6. This code should work in IE, though I'm having some serious problems with IE via Wine at work, so I'll have to test later.
  7. It uses a "blacklist", which is an array that contains ids to checkboxes you don't want enabled when the corresponding checkbox is clicked.

如果您有进一步的需求,请告诉我.

Let me know if you're looking for anything further.