Switch state wrong when underlying data changes and browser navigates back

[laur89]

Say we have some object btn with property isOn.
User navigates to a page, that renders the switch; the <input> element is rendered by backend, that sets the checked=checked attribute because this btn instance has isOn=true.

Switch uses the attribute correctly and the button is initialised in ON state as expected.

Now user navigates away, btn.isOn is set to false by some event, and then goes history.back().

Caching is off and the html is re-rendered. Server sends the <input> element without the checked attribute as expected. But the switch is still in ON state; supposedly because the checkbox has checked property (not attr) set.

What's the correct way for solving such scenarios? So far I've been setting the state manually from the init block like this:

var setToggleSwitchInitialState = function( switchWrapperSelector, switchSelector ) {
    if ( switchSelector.attr( 'checked' ) ) {
        if ( switchWrapperSelector.hasClass( 'bootstrap-switch-off' ) ) {
            switchSelector.bootstrapSwitch( 'toggleState', true );
        }
    } else {
        if ( switchWrapperSelector.hasClass( 'bootstrap-switch-on' ) ) {
            switchSelector.bootstrapSwitch( 'toggleState', true );
        }
    }
};

But it feels like there should be something better.
Reproduced with firefox & chromium running on a linux box.

[djhvscf]

+1

[mgraph]

I fixed this by adding autocomplete="off" to checkbox input