如果選中另一個復選框，如何啟用/禁用復選框？

Question

當我選中一個復選框時，我得到了如何檢查/取消選中或隱藏/顯示但我正在尋找的是當我有5個復選框時，當用戶點擊快餐時，快餐，餐飲，結轉，交付和欄，當用戶選中時，其余復選框被禁用餐飲，休息是禁用但當用戶檢查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>

 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

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

關於我正在做的事情的一些快速說明：

1. 我正在使用事件委派來最小化事件處理程序的數量。 表單偵聽冒泡的click事件，然后根據單擊的元素及其checked DOM屬性調用函數。
2. 我正在遍歷HTMLFormElement 。 元素集合可以輕松訪問復選框。
3. 如果它不是目標復選框，我在復選框上將disabled DOM屬性設置為“禁用”。
4. 如果沒有選中復選框，我會在復選框上將disabled DOM屬性設置為“”（空字符串）。
5. 如果用戶通過選項卡/輸入選擇復選框或通過onchange處理程序選擇其他方法，這也適用。
6. 這段代碼應該可以在IE中運行，雖然我在工作中遇到了一些嚴重的IE問題，所以我將不得不稍后進行測試。
7. 它使用“黑名單”，這是一個數組，其中包含單擊相應復選框時不希望啟用的復選框的ID。

如果您正在尋找更進一步的信息，請與我們聯系。

Answer 2

所以我還沒有完全掌握你想要到達的邏輯。 但是，如果您想要判斷復選框是否未選中或已選中，您可以像這樣測試它

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

你還需要傳遞這樣的方框參考

 onclick="HideOrShowStuff(this, 1)" 

希望有所幫助

Answer 3

試試這個代碼

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

Answer 4

js小提琴演示

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>

Answer 5

你可以使用jQuery，它（可能）會讓你的生活更輕松。 查看這些文章，了解如何實現您的目標（使用jQuery）：

使用JQUERY基於復選框選擇顯示/隱藏表單元素

復選框+ Jquery隱藏/顯示

注意：其他框架可用。 根據個人喜好選擇。

Answer 6

使用框架或工具包（如jQuery）將使生活更輕松，但最好學習如何使用javascript操作DOM，然后再轉到工具包。 喜歡在使用計算器之前學習添加。

處理此問題的最佳方法是查看復選框的狀態。 如果（document.myform.box2.checked == true），則根據復選框的狀態做出決策。 上面的功能只是修改了復選框，而不知道它們的狀態。 最好將（this）傳遞給函數，然后遍歷DOM。 當它作為參數進入函數時，“this”將成為復選框。 所以你的功能會說“好吧，我有復選框”1“傳遞給我，現在我的其他復選框的狀態是什么？”。