Question

我正在尝试使用bootstrap切换插件。但是我想在按钮的实际状态实际发生变化之前要求确认。我试过那个.change事件。但是，在我打开确认框之前，它会更改切换按钮的状态。你能告诉我可以做些什么吗？

这是HTML：

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

<div class="modal fade" id="modalTurnOff" tabindex="-1" role="dialog" aria-labelledby="modalTurnOff" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Are you sure you want to close your account?</h5>

      </div>
      <div class="modal-body">
       Lorem Ipsum
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">No, Keep active Status </button>
        <button type="button" class="btn btn-secondary js-change-status" data-type='0'>Yes, close it</button>
      </div>
    </div>
  </div>
</div>

这是我正在使用的JS：

<script> 
$('#toggle-event').on("change", function() {
    $("#modalTurnOff").modal();
});
</script>

但问题是，只要我点击切换按钮，它就会改变状态。

Answer 1

这是我想出的。在您的切换事件中，您只需确保切换具有类＆＃34;关闭＆＃34;当你进行AJAX通话时，你将其删除。

https://jsfiddle.net/0errvdeu/2/

$('#toggle-event').on("change", function(e) {
    var isClicked = $('#toggle-event').is(':checked');
    if(isClicked == true){
         $('#modalTurnOff').show();
         $('.toggle').addClass('off');
    }
});

在事件之前为bootstrap on-off开关插件

1 个答案: