9

I am using Bootstrap Switch plugin and Bootstrap Modal. Once the user clicks to change the Switch from on to off the Modal box fades in asking for a confirmation.

How do I change the Switch from on to off or from off to on only after the user clicks on Confirm button? If the user clicks on Cancel then the Switch should go back to Off status.

My code

$("#myswitch").bootstrapSwitch();

$('#myswitch').on('switchChange.bootstrapSwitch', function (e, data) {

    $('#showModal').modal({
     backdrop: 'static',
     keyboard: false
 });
});
brunodd
  • 2,474
  • 10
  • 43
  • 66

1 Answers1

23

You can use the state method to prevent the switch from changing. Remember to use the third parameter to make sure the event is not executed again.

    $('#myswitch').bootstrapSwitch('state', !data, true);

Working example :

https://jsfiddle.net/hL0as0mv/169/

Full documentation : http://bootstrapswitch.site/methods.html

Adeel Ansari
  • 39,541
  • 12
  • 93
  • 133
Maxime Peloquin
  • 915
  • 12
  • 22
  • Thanks for sharing this. It's nearly there. How do I show the Confirmation modal before changing the status no matter if it's On or Off. In your example the Confirmation modal shows only when changing from Off to On. Sorry I should have mentioned that on the question, I just edited it. – brunodd Jul 10 '15 at 17:41
  • 1
    @brunodd Sorry I thought that was what you wanted. Edited jsfiddle. – Maxime Peloquin Jul 10 '15 at 17:55
  • 1
    If you want the status to be set to off when ever user hits cancel : http://jsfiddle.net/hL0as0mv/1/ – Maxime Peloquin Jul 10 '15 at 17:58
  • Thanks mate! That was exactly what I was looking for! Thank you so much! – brunodd Jul 10 '15 at 21:35
  • Perfect! JSfiddle was perfect! – Parth Jul 12 '16 at 06:17