Firstly, here is a JsFiddle: /

This is what I want to happen:

1. Switch starts in the indeterminate / in-between state (this works)
2. Event fires when user chooses either state (this works)
3. When use clicks RESET the switch goes back to the indeterminate / in-between state (this works)
4. Event fires when user chooses either state (this DOES NOT work)

What is happening is if the user goes back to whatever the previous state was then no event fires. So say it was on YES, they click RESET, then click YES again - no event fires (but if it was previously on YES, and the reset then went to NO then the event would fire).

I've got no idea how to approach this. I've tried things like destroying and recreating the switch:

$('input[name=test]').bootstrapSwitch('destroy');
$('input[name=test]').bootstrapSwitch();

To no avail unfortunately.

Here is the important thing for me - all I need to know is when the user moves from the indeterminate state to ANY state. I don't actually care what they choose, as long as they choose something. So if anyone can think of a different type of workaround with that in mind (maybe it makes it easier) that would definitely be wele.

Any help is appreciated, this is driving me crazy.

Firstly, here is a JsFiddle: http://jsfiddle/VTv2j/76/

This is what I want to happen:

1. Switch starts in the indeterminate / in-between state (this works)
2. Event fires when user chooses either state (this works)
3. When use clicks RESET the switch goes back to the indeterminate / in-between state (this works)
4. Event fires when user chooses either state (this DOES NOT work)

What is happening is if the user goes back to whatever the previous state was then no event fires. So say it was on YES, they click RESET, then click YES again - no event fires (but if it was previously on YES, and the reset then went to NO then the event would fire).

I've got no idea how to approach this. I've tried things like destroying and recreating the switch:

$('input[name=test]').bootstrapSwitch('destroy');
$('input[name=test]').bootstrapSwitch();

To no avail unfortunately.

Here is the important thing for me - all I need to know is when the user moves from the indeterminate state to ANY state. I don't actually care what they choose, as long as they choose something. So if anyone can think of a different type of workaround with that in mind (maybe it makes it easier) that would definitely be wele.

Any help is appreciated, this is driving me crazy.

• javascript
• jquery

• Thanks to Uhkis (a legend) for helping me with this. He worked out I needed to rebind the event after destroying - see jsfiddle/VTv2j/77 – b85411 Commented Apr 9, 2015 at 6:47

2 Answers 2

Here's a working version of the code above: http://jsfiddle/byzwng4t/1/

function initializeSwitch(selector) {
    $(selector).bootstrapSwitch('destroy', true);
    $(selector).bootstrapSwitch({
        'state': null
    }); 
    $(selector).on('switchChange.bootstrapSwitch', function(event, state) {
        console.log('change event' + (new Date()).getTime());
    });
}

$(function() {
    initializeSwitch('input[name=test]');

    $('.reset').click(function() {
        initializeSwitch('input[name=test]');
    });
});

The trick is to bind the events again after destroying the switch.

$('input[name=test]').bootstrapSwitch('state', $('input[name=test]').is(':checked'), true);

Refer: http://bootstrapswitch.site/methods.html

Stackoverflow: Bootstrap Switch - Change state after clicking on button