Javascript 引导切换无法在禁用启用且元素有限的情况下工作

我使用Bootstrap Toggle Library和Bootstrap4，但当我试图控制用户只“打开”有限数量的元素时，我遇到了问题。以下是我的HTML代码：

<div style="border:solid border-width: 1px;">
       <li class="ui-state-default">
           <input type="checkbox" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"data-onstyle="success" data-offstyle="danger">
                 Option 1
    </li> </div>

下面是我将4个元素切换到“开”时的结果照片：

我可以看到条件是正确的，并检测到3个元素何时“打开”，但我不能禁用其余的“错误”输入，直到一些“打开”元素切换到“关闭”。有人能帮忙吗

此外，我使用从引导禁用，但不工作

谢谢大家

编辑：

---

您的脚本中有一个错误。 尝试更改此选项：

$('input[name=checkImg]')

对此

$('input[name="checkImg"]')

我试着纠正这一点，现在脚本似乎起作用了

编辑：我发现问题在于引导切换，它使用一种不同的方法来选中和取消选中复选框

除了取消选中复选框，您还必须将其父div的类从btn success更改为btn danger off。现在，这个代码片段也应该适用于您

$'input[name=checkImg]'。在'change'上，函数e{ 如果$'input[name=checkImg]：选中。长度>3{ console.log您最多可以选择3个选项； $this.prop'checked'，false； $this.parent.removeClassbtn-success； $this.parent.addClassbtn-默认关闭； } }; 有争议的图像 选择1 选择2 选择3 选择4

---

嗯，我改了，但它还是一样。谢谢你的更正。我想问题出在引导切换上，正如你在我的代码中看到的那样：你做到了。一个很好的答案，效果很好。谢谢大家。请随附JSFIDLE工作示例，我们将能够修复您的代码。我将其附在问题上。

$('input[name="checkImg"]')