CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-4
Simon T
Simon T

Reputation: 85

Bootstrap button toggle/switch status

I have a bootstrap button based toggle/switch. I believe it comes from http://www.bootstrap-switch.org/ but their website isn't working so I cant get any documentation.

I'm trying to get the switch to launch one of two modals when a user changes the switch's position.

<button type="button" class="btn btn-sm btn-toggle btn-info active" data-toggle="button" aria-pressed="true" autocomplete="off" id="ProcessingOnOff">

    $('#ProcessingOnOff').click(function(){
   $(this).is(':active')?$('#myModal').modal('show'):"";
});

$('#ProcessingOnOff').click(function(){
   !$(this).is(':active')?$('#myModal2').modal('show'):"";
});

https://jsfiddle.net/Airfox/oqtbm9pe/

The switch launches modal #2 every time. I am assuming this is because modal #2 is set to a ! (not) status, and there are a lot of things its not. I have tried 'active', 'true', '1', 'clicked', and even 'checked', but I cannot figure out what the status actually is.

Does a switch/toggle like this actually have a status? And if not how can I apply a status to make it operable?

Upvotes: 0

Views: 1308

Answers (1)

imvain2
imvain2

Reputation: 15847

You have 2 click handlers for the same element, which means they won't act like you want them to.

I changed it to one click handler and used hasClass instead of is:active. This function works in your fiddle.

$('#ProcessingOnOff').click(function(){
    var modal_id = ($(this).hasClass('active')) ? "#myModal" : "#myModal2";
    $(modal_id).modal('show');
});

Upvotes: 1

Related Questions