选中另一个复选框时如何启用/禁用复选框？答案

【问题标题】：How do I enable/disable checkboxes when another checkbox is selected?选中另一个复选框时如何启用/禁用复选框？
【发布时间】：2011-08-28 23:24:41
【问题描述】：

我了解了当一个复选框被选中时如何选中/取消选中或隐藏/显示，但我正在寻找的是当我有 5 个复选框时，当用户单击快餐时，我有 5 个快餐、餐饮、随身携带、送货和酒吧，其余复选框被禁用，当用户选中餐饮时，休息被禁用，但当用户选中随身携带时，只有快餐和餐饮被禁用。然后，当用户取消选中时，所有复选框都重新启用/显示。谢谢！ ——

这是我的代码：

<script type="text/javascript">
function HideOrShowStuff(controlToHide1)
{


       if (document.getElementById)
   {
          if(controlToHide1==1)
      {
      document.getElementById('2').disabled=true;
        document.getElementById('3').disabled = true;
          document.getElementById('4').disabled = true;
           document.getElementById('5').disabled = true;
           document.getElementById('1').disabled = false;
             }
        if(controlToHide1==2)
      { 
         document.getElementById('1').disabled=true;
        document.getElementById('2').disabled = false;
          document.getElementById('4').disabled = true;
           document.getElementById('5').disabled = true;
           document.getElementById('3').disabled = true;
              }
                  if(controlToHide1==3)
      { 
          document.getElementById('1').disabled=true;
        document.getElementById('2').disabled = true;
          document.getElementById('4').disabled = false;
           document.getElementById('5').disabled = false;
           document.getElementById('3').disabled = false;
              }
                  }
        }

</script>

 Type of restaurant are you?<br /> <br /> 
<input type="checkbox" name="restaupop1"  id="1"value="fastfood" onclick="HideOrShowStuff(1)"    <?PHP print $fastfood_status; ?>> Fast Food/Drive Thru  <br />
<input type="checkbox" name="restaupop2" id="2"value="catering"  onclick="HideOrShowStuff(2); setVisible('restaubar');"   <?PHP print $catering_status; ?>> Catering<br />
<input type="checkbox"  name="restaupop3" id="3" value="carryout"  onclick="HideOrShowStuff(3)"   <?PHP print $carryout_status; ?>> Carry-Out<br />
<input type="checkbox" name="restaupop4" id="4"value="delivery"   onclick="setVisible('barpop1');"  <?PHP print $delivery_status; ?>> Delivery<br />
<input type="checkbox" name="restaupop5" id="5"value="bargrill" onclick="setVisible('restaubar');"     <?PHP print $bargrill_status; ?>>Bar/Grill

【问题讨论】：

你也有 PHP 代码，它的 HTML 版本是什么？在呈现文档之前我无法确定。
html 版本很长......但要确保......这就是我要寻找的......我了解了如何选中/取消选中或隐藏/显示一个复选框已选中，但让我们看看当用户单击快餐时我有 5 个复选框快餐、餐饮、随身携带、送货和酒吧时，其余复选框被禁用，当用户选中餐饮时，休息被禁用，但当用户选中随身携带时，只有快餐和餐饮被禁用。然后，当用户取消选中时，所有复选框都重新启用/显示。谢谢！ ——

标签： javascript checkbox

【解决方案1】：

总之，难度不大。

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 = "";
        }
    }   
}

关于我正在做的事情的一些简短说明：

我正在使用事件委托来最小化事件处理程序的数量。该表单会侦听冒泡的单击事件，然后根据单击的元素及其checked DOM 属性调用函数。
我正在遍历HTMLFormElement.elements 集合以轻松访问复选框。
如果它不是目标复选框，我会将复选框上的 disabled DOM 属性设置为“禁用”。
如果没有选中任何复选框，我会将复选框上的disabled DOM 属性设置为“”（一个空字符串）。
如果用户通过制表符/输入或其他方法通过onchange 处理程序选择复选框，这也有效。
此代码应该在 IE 中工作，虽然我在工作中通过 Wine 使用 IE 时遇到了一些严重问题，所以我必须稍后进行测试。
它使用“黑名单”，这是一个数组，其中包含您不想在单击相应复选框时启用的复选框的 ID。

如果您还想进一步了解，请告诉我。

【讨论】：

你很接近马特，但我想当用户点击 foo 时，bar 和 baz 被禁用/隐藏，然后当用户点击 bar 时 - 只有 foo 被禁用。谢谢！
有固定的方法吗？换句话说，当单击另一个特定输入时是否会禁用一个特定输入？模式是什么？
是的，是一套方法，我们用这个场景来根据餐厅的类型来确定什么是正确的产品。
我要找的是当我有 5 个复选框快餐、餐饮、随身携带、送货和酒吧时，当用户单击快餐时，其余复选框被禁用，当用户选中餐饮时，其余复选框被禁用，但当用户选中随身携带时只有快餐和餐饮被禁用。然后当用户取消选中时，所有复选框都返回启用/显示。谢谢！ ——
我创建了一个“黑名单”功能，使您能够硬连线您想要禁用的复选框 ID 列表：jsfiddle.net/A5TGf/9。让我知道这是否是您正在寻找的。span>

【解决方案2】：

所以我还没有完全理解你试图在这里得到的逻辑。但是如果你想知道复选框是未选中还是选中你可以像这样测试它

 function hideOrShowStuff(box, controlToHide1) {
   if(box.checked) {
     // the hide logic
   } else {
    // the show logic
   }
 }

您还需要传入框引用像这样

 onclick="HideOrShowStuff(this, 1)"

希望对你有帮助

【讨论】：

好的，我了解了如何在选中一个复选框时选中/取消选中或隐藏/显示，但我正在寻找的是当用户单击时我有 5 个复选框快餐、餐饮、随身携带、送货和酒吧快餐，休息复选框被禁用，当用户选中餐饮时，休息被禁用，但当用户选中随身携带时，只有快餐和餐饮被禁用。然后，当用户取消选中时，所有复选框都重新启用/显示。谢谢！

【解决方案3】：

您可以为此使用 jQuery，它（可能）会让您的生活更轻松。查看这些文章，了解如何实现您想要的（使用 jQuery）：

USING JQUERY TO SHOW/HIDE FORM ELEMENTS BASED ON A CHECKBOX SELECTION

Checkboxes + Jquery hide/show

注意：其他框架可用。根据个人喜好选择。

【讨论】：

如果您想知道 Javascript 的实际工作原理，您不应该使用 JQuery - 也许 OP 想学习？
不，他应该使用 Dojo 或 YUI 或 Ender.js 或 ext3 或 vanilla js 或任何适合此的框架。仅仅因为 jquery 存在并不意味着它就是答案。
我认为这对 jQuery 来说太简单了。设置 DOM 属性并不难。
简单...我没有说这是唯一的答案，我只是说它比他拥有的代码更容易。我会修改答案以使其更清楚。更简单，更短，更易于管理，而且更可能与跨浏览器兼容。
哇，因为提到 jQuery 而被标记。我会用肥皂漱口。虽然 jQuery 不是唯一的框架，主观上它可能不是最好的，但如果你正在构建 web 应用程序，那么它对许多人来说可能是一个不错的选择。是的，jQuery 只是一个包装器中的 JS，是的，有时普通的 ole JS 很容易完成这项工作，但是如果你有一个完整的 Web 应用程序要构建，那么从一开始就使用一个框架，无论大小都是一样的感觉。

【解决方案4】：

使用框架或工具包（如 jQuery）会让生活更轻松，但最好先了解如何使用 javascript 操作 DOM，然后再使用工具包。就像在使用计算器之前学习加法一样。

处理此问题的最佳方法是查看复选框的状态。 if(document.myform.box2.checked == true)，然后根据复选框的状态做出决定。您上面的功能只是修改复选框而不知道它们的状态。最好将 (this) 传递给函数，然后遍历 DOM。当它作为参数进入函数时，“this”将是复选框。所以你的函数会说“好的，我已经将复选框“1”传递给我，现在我的其他复选框的状态是什么？”。

【讨论】：

我了解了如何隐藏/显示，但我正在寻找不同的场景。

【解决方案5】：

试试这个代码

 <script>
            function uncheck0(){
                for(var ii=1; ii<=3; ii++){
                    if(document.getElementById("q6_"+ii).checked==true){
                       document.getElementById("q6_"+ii).checked=false;
                    }
                }
            }
            function uncheck(id, from, to){
                for(var ii=from; ii<=to; ii++){
                    if(document.getElementById(id+ii).checked==true){
                       document.getElementById(id+ii).checked=false;
                    }
                }
            }
        </script>

【讨论】：

【解决方案6】：

js fiddle demo

function changeCheckBox() {
     try {

         var max = document.mainForm.serNo.length;
         var count = 0;

         for (var i = 0; i < max; i++) {
             if (document.mainForm.serNo[i].checked == true) {
                 count++;
                 serNoChecked = i;
             }
         }
         if (count == 1) {
             for (var i = 0; i < max; i++) {
                 if (document.mainForm.serNo[i].checked == false) {
                     document.mainForm.serNo[i].disabled = true;
                 }
             }
         } else if (count == 0) {
             for (var i = 0; i < max; i++) {
                 document.mainForm.serNo[i].disabled = false;
             }
         }

         if (null == max) return false;
         if (count == 0) {
             return true;
         } else if (count > 0) {
             return false;
         }

     } catch (e) {
         alert(e.message);
     }
 }



<form  name="mainForm" method="GET" action="Controller">
<TD STYLE="width:10px">
    <input type="checkbox" id="serNo" name="serNo" value="" onclick="changeCheckBox()" />
    <input type="checkbox" id="serNo" name="serNo" value="" onclick="changeCheckBox()" />
    <input type="checkbox" id="serNo" name="serNo" value="" onclick="changeCheckBox()" />
</TD>
</form>

【讨论】：