时间戳

首页 > 解决方案 > Bootstrap Toggle 不适用于已禁用且元素有限的情况

javascript - Bootstrap Toggle 不适用于已禁用且元素有限的情况

问题描述

我正在将 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>

所有 11 个元素都有相同的代码，我的 Jquery：

$('input[name="checkImg"]').on('change', function (e) {
    if ($('input[name="checkImg"]:checked').length > 3 ) {
          console.log("In Condition");
          $(this).prop('checked', false);   
     }                        
   });

这是我将 4 个元素切换为“ON”时的结果照片： 在此处输入图像描述

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

此外，我从引导程序中使用禁用但没有工作。

谢谢大家。

编辑：

https://jsfiddle.net/5vr0c3w2/14/

标签： javascriptjqueryhtmlbootstrap-4angular-bootstrap-toggle

解决方案

您的脚本中有错误。尝试改变这一点：

$('input[name=checkImg]')

对此

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

我尝试更正此问题，脚本现在似乎可以正常工作。

编辑：我看到问题出在 Bootstrap-toggle 上，它使用不同类型的方法来检查和取消选中复选框。

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

$('input[name="checkImg"]').on('change', function (e) {
    if ($('input[name="checkImg"]:checked').length > 3 ) {
        console.log("You can select no more than 3 options");
        $(this).prop('checked', false);
        $(this).parent().removeClass("btn-success");
        $(this).parent().addClass("btn-default off");
    }                        
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <!-- Primera Fila -->
  <div class="col">
    <div class="card">
      <div class="card-header colorPlataforma">Imagenes Disponibles</div>
      <div class="card-body fuenteTabla">
        <div class="overflow">
          <ul class="justify-content-center col-12 connectedSortable" id="sortable1">
            <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>
            <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 2
              </li>
            </div>
            <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 3 
              </li>
            </div>
            <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 4
              </li>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读