Javascript 如果选择了某些复选框，如何禁用其余可用复选框

我想通过互联网找到这种带有图片的复选框。（）选择3时，我需要禁用其余复选框

JS

我认为用javascript可以解决最好的问题，但我有点困惑

---

谢谢大家!

只是一些简单的逻辑来检查当前有多少类，以及当前单击的元素是否有类，如果没有，则应禁用：

if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked')) 
    return;

如果将其添加到onclick事件中，它应该相应地进行操作

这是一个分叉的代码笔：

Codepen不喜欢这样，因为某些原因，如果它不加载，这里有一个代码段：

//图像库
//初始化输入的状态
$（“.image复选框”）.each（函数（）{
if（$（this）.find（'input[type=“checkbox”]'）.first（）.attr（“checked”））{
$（this.addClass（'image-checkbox-checked'）；
}否则{
$（this.removeClass（'image-checkbox-checked'）；
}
});
//将状态同步到输入
$（“.image checkbox”）。在（“单击”上，函数（e）{
if（$（'.image checkbox-checked'）.length==3&&！$（this）.hasClass（'image-checkbox-checked'））返回；
$（this.toggleClass（'image-checkbox-checked'）；
var$checkbox=$（this.find（'input[type=“checkbox”]”）；
$checkbox.prop（“选中”），！$checkbox.prop（“选中”））
e、 预防默认值（）；
});
.nopad{
左侧填充：0！重要；
右边填充：0！重要；
}
/*图像库*/
.图像复选框{
光标：指针；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
边框：4px实心透明；
页边距底部：0；
大纲：0；
}
.image复选框输入[type=“checkbox”]{
显示：无；
}
.图像复选框已选中{
边框颜色：#4783B0；
}
.image checkbox.fa{
位置：绝对位置；
颜色：#4A79A3；
背景色：#fff；
填充：10px；
排名：0；
右：0；
}
.image复选框已选中。fa{
显示：块！重要；
}

引导映像复选框（多个）
创建一个计数器以跟踪选中的复选框数量：

//html
<input type="checkbox" class="checkbox">1
<input type="checkbox" class="checkbox">2
<input type="checkbox" class="checkbox">3                            


let count=0；
$（“.checkbox”）。在（“单击”，函数（）{
如果（$（this）.is（“：checked”））{
$（this.removeClass（“撤消”）.addClass（“完成”）
计数++；
}否则{
$（this.removeClass（“完成”）.addClass（“撤消”）
计数--
}
如果（计数=“3”）{
$（“.checkbox”）.each（函数（）{
if（$（“.checkbox”）.hasClass（“撤消”））{
$（“.undone”）.attr（“已禁用”、“已禁用”）
}
});
}
否则{
$（“.checkbox”）.attr（“已禁用”，false）
}
})

选择1
选择2
选择3
选择4
备选案文5
备选案文6
但您的示例中只有5个复选框？那么，复选框的“其余”是什么呢？在这个例子中，可能是3，所以2将被禁用，直到我没有收到你的问题。我应该能够最多单击3个复选框，或者，在本例中，只单击3个images.np@felipefullearangua阅读如何编写一个好的问题，你格式化了你的代码和所有内容@FelipeFullerArangua，如果它解决了您的问题，请接受其他寻求类似解决方案的人的答案：）
//html
<input type="checkbox" class="checkbox">1
<input type="checkbox" class="checkbox">2
<input type="checkbox" class="checkbox">3                            

let numberOfCheckboxesChecked = 0;

$('.checkbox').on("change", (e) => {
  if (e.target.checked) {
     numberOfCheckboxesChecked +=1 ;
  } else {
      numberOfCheckboxesChecked -=1;
  }

  if (numberOfCheckboxesChecked > 3) {
    e.target.checked = false;
   // or some other code to disable the remaining inputs
  }
});