Javascript 当选中另一个复选框时，如何启用/禁用复选框？

我了解了当选中一个复选框时如何选中/取消选中或隐藏/显示，但我要查找的是当我有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

函数HideOrShowStuff（controlToHide1）
{
if（document.getElementById）
{
如果（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；
}
如果（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；
}
如果（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；
}
}
}
你是哪种餐馆？


您可以使用jQuery来实现这一点，因为它（可能）会让您的生活更轻松。查看这些关于如何实现您想要的（使用jQuery）的文章：



NB:其他框架可用。根据个人喜好来选择。
所以我还没有完全理解你在这里想要表达的逻辑。
但是如果您想知道复选框是未选中还是已选中
你可以这样测试它

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

 onclick="HideOrShowStuff(this, 1)" 

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

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

 onclick="HideOrShowStuff(this, 1)" 

希望使用框架或工具包（如jQuery）会使生活变得更轻松，但最好在使用工具包之前先了解如何使用javascript操纵DOM。喜欢在使用计算器之前学习加法

处理此问题的最佳方法是查看复选框的状态。如果（document.myform.box2.checked==true），则根据复选框的状态做出决定。上面的函数只是修改复选框，而不知道它们的状态。最好将（这个）传递给函数，然后遍历DOM。“this”是作为参数进入函数时的复选框。因此，您的函数会说“好的，我已将复选框“1”传递给我，现在我的其他复选框的状态如何？”。
总之，不太难


HTML:


福
酒吧
巴兹

JS:

var form=document.getElementById（“checkForm”）；
form.onclick=delegateFormClick；
addChangeHandlers（表格）；
函数addChangeHandlers（表单）
{
对于（var i=0；i请尝试以下代码

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


函数uncheck0（）{
对于（var ii=1；ii

函数changeCheckBox（）{
试一试{
var max=document.mainForm.serNo.length；
var计数=0；
对于（变量i=0；i0）{
返回false；
}
}捕获（e）{
警报（e.message）；
}
}
如果你想知道Javascript的实际工作原理，就不应该使用JQuery——也许OP想学习？不应该，他应该使用Dojo、YUI、Ender.js、ext3或vanilla js，或者任何适合的框架。仅仅因为JQuery存在并不意味着它就是答案。我认为，这对JQuery来说太简单了。设置DOM属性并不简单这不是很难。很简单……我没有说这是唯一的答案，我只是说这会比他拥有的代码更简单。我会修改答案，让它更清楚。更简单，更简单，更容易管理，更容易跨浏览器兼容。哇，记下了提到jQuery。我会用肥皂漱口。而jQuery并不是唯一的框架，主观上可以说它不是最好的，如果你正在构建web应用程序，那么它对很多人来说都是一个不错的选择。是的，jQuery只是包装器中的JS，是的，有时候简单的ole JS对于这项工作来说已经足够容易了，但是如果你有一个完整的web应用程序要构建，那么对于bi来说，从一开始就使用一个框架g和一些小东西都很有意义。你也有PHP代码，这个的HTML版本是什么？在呈现文档之前我不知道。HTML版本很长…但为了确保…这就是我要找的…我了解了如何选中一个复选框时选中/取消选中或隐藏/显示，但让我们看看我有5个复选框当用户单击“快餐”时，禁用“休息”复选框；当用户选中“餐饮”时，禁用“休息”，但当用户选中“餐饮”时，禁用“休息”，但仅禁用“快餐”和“餐饮”
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>