我正在尝试使用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>
但问题是,只要我点击切换按钮,它就会改变状态。
答案 0 :(得分:0)
这是我想出的。在您的切换事件中,您只需确保切换具有类&#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');
}
});