如果选中另一个复选框，我如何启用/禁用复选框？ [英] How do I enable/disable checkboxes when another checkbox is selected?

查看：133
本文介绍了如果选中另一个复选框，我如何启用/禁用复选框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我得到了如何检查/取消选中或隐藏/显示，当一个复选框被选中，但是我正在寻找是当我有5个复选框快餐，餐饮，进餐，交货和酒吧，当用户点击快餐，休息复选框被禁用，当用户选中Catering时，休息被禁用，但是当用户选中Carryout时，Fastfood和Catering被禁用。然后当用户取消选中时，所有复选框返回启用/显示。谢谢！ -



这里是我的代码：

 < 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> 
 
你是餐厅的类型吗？< br /> < br /> 
< input type =checkboxname =restaupop1id =1value =fastfoodonclick =HideOrShowStuff（1）&php打印$ fastfood_status; >>快餐/驱动器< br /> 
< input type =checkboxname =restaupop2id =2value =cateringonclick =HideOrShowStuff（2）; setVisible（'restaubar'）; <？PHP print $ catering_status; >>餐饮< br /> 
< input type =checkboxname =restaupop3id =3value =carryoutonclick =HideOrShowStuff（3）< input type =checkboxname =restaupop4id =4value =deliveryonclick =setVisible（'barpop1'）; <？PHP print $ delivery_status; >>交货< br /> 
< input type =checkboxname =restaupop5id =5value =bargrillonclick =setVisible（'restaubar'）; <？PHP print $ bargrill_status; ？>>栏/烧烤


解决方案

，不太难。



http：// jsfiddle。 net / A5TGf / 19 /



HTML：

 < form action =./id =checkFormmethod =post> 
< fieldset> 
< label for =foo> foo< / label> 
< input type =checkboxid =foovalue =foo/> 
< label for =bar> bar< / label> 
< input type =checkboxid =barvalue =bar/> 
< label for =baz> baz< / label> 
< input type =checkboxid =bazvalue =baz/> 
< / fieldset> 
< / form>

JS：

 code> 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））; 
} 
} 
} 
 
函数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）
 {
 casefoo：
 blacklist = [bar，baz] ; 
 break; 
 casebar：
 blacklist = [foo]; 
 break; 
 casebaz：
 blacklist = [foo，bar]; 
 break; 
} 
} else 
 {
 throw new Error（需要硬编码输入黑名单的ID）; 
} 
 for（var i = 0; i< blacklist.length; i ++）
 {
 var element = document.getElementById（blacklist [i]）; 
 if（element&& element.nodeType === 1）
 {
 //检查元素
 if（element.tagName ===INPUT& & element.type ===checkbox&&！element.checked）
 {
 element.disabled =disabled; 
} 
} else if（！element || element.nodeType！== 1）
 {
 throw new Error（input blacklist item不存在或不是元素）; 
} 
} 
} 
 
 function enableCheckBoxes（form）
 {
 for（var i = 0; i  {
 var element = form.elements [i]; 
 if（element.tagName ===INPUT&&& element.type ===checkbox&&！element.checked）
 {
 element.disabled = ; 
} 
} 
}

'm in：


  1. 我使用事件委托来最小化事件处理程序的数量。该形式监听一个点击事件冒泡，然后根据点击的元素和其检查 DOM属性调用函数。

  2. 我遍历 HTMLFormElement 。元素集合以轻松访问复选框。

  3. 我设置禁用如果不是目标复选框，则将复选框的DOM属性设置为禁用。

  4. 我设置了

  5. 如果用户通过标签/输入或其他方式选择了复选框，这也可以使用 在IE中工作，虽然我有一些工具可以通过 onchange

  6. 它使用一个黑名单，这是一个数组，其中包含ids到复选框你不想要的


    7. 如果您要查找更多信息，请与我们联系。


    I got on how to check/unchecked or hide/show when one checkbox is checked but what im looking for is when I have 5 checkboxes Fastfood, Catering, Carryout, Delivery and Bar when user clicked Fastfood ,rest checkboxes are disable, when user checked Catering, rest are disable but when user checked Carryout only Fastfood and Catering are disable. Then when user unchecked, all checkboxes back to enable/show. thanks! –

    Here my code:

    <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

    解决方案

    All in all, not too difficult.

    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. 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.

    这篇关于如果选中另一个复选框，我如何启用/禁用复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆