如何使用单选按钮（Javascript）禁用和限制复选框

我有一个单选按钮和几个复选框。我基本上希望在选择非独占时禁用复选框，然后在选择包1时将复选框限制为2

这是我的html代码：

它启用复选框，但不会限制它。此外，如果我按back toNon-Exlusive，复选框不会返回为“禁用”

我还尝试了以下代码：

var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
   this.checked = false;
}
});

---

它限制了我的复选框，但不响应我的单选按钮。

如果您熟悉JQuery，请使用此选项 选择非独占时禁用复选框的步骤

$('input[type=radio]').change(function(){
  if($(this).attr('id') == 'non-exclusive'){
    $("input[type=checkbox]").attr("disabled","disabled");
  } else {
    $("input[type=checkbox]").removeAttr("disabled");
  }
 });

选择package1时将复选框限制为2

$('input[type=checkbox]').change(function(){
   //get the checked radio id
   var radio = $('input[type=radio]:checked').attr('id');

   if(radio == 'package1'){
      //check the number of the checked checkboxes
      if($('input[type=checkbox]:checked').length > 2){
         //do what you want here  ex: display alert message
         this.checked=false;
         return false;
      }//end if
    }//end if
});

---

当然，如果用户在选择了两个以上的复选框后选择了package1，那么您必须编写更多的代码来取消选中所有复选框，或者实现您的逻辑。如果用户在package2中选择了两个以上的复选框，那么您所要做的一切都将由下面来完成

var$checkbox=$（'.checkboxfood:checkbox'），
$radios=$（'.radios输入：radio'）
$radios.on（'change'，功能（e）{
if（this.value===‘非独占’）{
$checkbox.prop（'checked'，false）.prop（'disabled'，true）
}否则{
$checkbox.prop（'disabled'，false）；
}
如果（this.value==“package1”）{
//只保留2个复选框
$checkbox.filter（':checked:gt（1）'）。prop（'checked'，false）
}
});
//只需知道选中复选框时是否选中了包1
$checkbox.on（'change'，函数（e）{
if（$（'#package1'）.is（':checked'）&&&$checkbox.filter（':checked'）.length>2）{
此项检查=错误；
console.log（“包1只允许2个”）
}
})

非排他性
包1
方案2


米饭


2个选择


白米（强制）
奶油米饭
蒜米饭
泡菜饭
阿多波大米
扬州饭


上海大米
巴贡米

使用本机JavaScript：

let q=document.getElementsByClassName（'food'）；
q=数组。从（q）；
//处理查克事件
让packages=document.querySelectorAll（'input[name=“packages”]”）
packages=Array.from（包）；
让foods=Array.from（document.querySelectorAll（'input[type=“checkbox”]”）
foods=数组。来自（foods）；
用于（打包）{
if（packages.hasOwnProperty（pack））{
包[pack].onclick=function（）{
让我们选择pack=this.value；
如果（choosedPack===‘非独占’）{
q、 forEach（功能（项目）{
item.disabled=true；
});
}否则如果（选择pack===“package1”）{
q、 forEach（功能（项目）{
item.disabled=false；
});
q、 forEach（功能（项目）{
item.checked=false；
});
为了（让食物进入食物）{
if（食品。自有财产（食品））{
食品[食品]。onclick=功能（）{
if（（document.querySelectorAll（'input[type=“checkbox”]：checked'）.length）>2）{
警报（“超过2个值！”）；
this.disabled=false；
返回false；
}
}
}
}
}
}
}
}

非排他性
包1
方案2


米饭


2个选择


白米（强制）
奶油米饭
蒜米饭
泡菜饭
阿多波大米
扬州饭


上海大米
巴贡米

您尝试过什么？你的具体问题是什么？这不是一个只发布你想要的内容并期望我们只为你提供解决方案的网站。请避免在同一篇文章中问多个问题。以一个特定的问题为目标。@31P好吧，所有的问题都连接成一个问题。jQuery选择器中的一些类在html中不存在。使用您的代码和匹配项创建html@charlietfl我将“单个复选框”改为“复选框”和“复选框”，但仍然不起作用。我只是想知道是否有一种方法可以将两个解决方案链接成一个完整的代码/字符串。非常感谢！这就是我需要的。我只添加缺少的代码。应该使用

prop（）^^
$('input[type=radio]').change(function(){
  if($(this).attr('id') == 'non-exclusive'){
    $("input[type=checkbox]").attr("disabled","disabled");
  } else {
    $("input[type=checkbox]").removeAttr("disabled");
  }
 });

$('input[type=checkbox]').change(function(){
   //get the checked radio id
   var radio = $('input[type=radio]:checked').attr('id');

   if(radio == 'package1'){
      //check the number of the checked checkboxes
      if($('input[type=checkbox]:checked').length > 2){
         //do what you want here  ex: display alert message
         this.checked=false;
         return false;
      }//end if
    }//end if
});