Question

Bootstrap切换按钮仅在关闭后第一次工作，第二次打开时切换按钮无法切换。它在第三次打开后再次起作用。

 <input checked data-toggle="toggle" type="checkbox">

代码有什么问题？任何解决方案？

<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">

启动modal1

<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal 1 title</h4>
      </div>
      <div class="modal-body">
         <input checked data-toggle="toggle" type="checkbox">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

这是解决方案：

    <button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Modal</button>
    <!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal 1 title</h4>
      </div>
      <div class="modal-body">
        <div>
             <input checked type="checkbox" id="toggle-check" data-toggle="toggle">
         <span class="checked">Value 1</span>
         <span class="unchecked">Value 0</span>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<强> CSS：

.unchecked{
    display: none;
}
.toggle.off ~ .unchecked{
    display: inline-block
}
.toggle.off ~ .checked{
    display: none;
}

以下是预览链接： https://codepen.io/ziruhel/pen/yPJzoO

要在modal中重新初始化bootstrap-toggle插件，请添加以下代码：

$('.modal').on('shown.bs.modal', function (e) {
  $('#toggle-check').bootstrapToggle();
})

为什么bootstrap切换按钮只能在模态对话框中第一次点击？

1 个答案: