Bootstrap Switch from indeterminate state

Question

Starting with this fiddle:

https://jsfiddle.net/okuem1fb/

<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE2" class="alert-status pt2">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE3" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE4" class="alert-status">
</div>

$('.alert-status').bootstrapSwitch('state', true);
$(".alert-status pt2").attr('data-indeterminate', 'true');
$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {
   alert($(this).data('checkbox'));
});

From the indeterminate state the button reacts based on which side you click: Click on 'On' and the switch goes to 'Off' Click on 'Off' and the switch goes to 'On'.

I would like to change that, when I click on the side of 'On' I actually expect it to go to the status 'On' and vice versa for 'Off'...

Also when clicking on 'Off' from the indeterminate state, the event used doesn't trigger...

Any thoughts on how to change this?

Answer 1

I hope that the solution has been found since....

In case for those who are in the same situation, here is the solution. It is necessary to modify the js file (bootstrap-switch.js) and find the line corresponding to :

key: '_handleHandlers',
  value: function _handleHandlers() {
    var _this6 = this;

    this.$on.on('click.bootstrapSwitch', function (event) {
      event.preventDefault();
      event.stopPropagation();
      _this6.state(true); //--> _this6.state(false);
      return _this6.$element.trigger('focus.bootstrapSwitch');
    });
    return this.$off.on('click.bootstrapSwitch', function (event) {
      event.preventDefault();
      event.stopPropagation();
      _this6.state(false); //--> _this6.state(true);
      return _this6.$element.trigger('focus.bootstrapSwitch');
    });
  }

That will modify the switch to go "On" when you click on "On" and go "Off" when clicking on the other-side. You can modify the minified file the same way (juste have to find which specific places to modify)...

For the change event, after initialization, you have to set the switch state to null :

$("#my-switch").bootstrapSwitch({
    indeterminate: true,
    state: null
});

This has been discused on Github here : https://github.com/Bttstrp/bootstrap-switch/issues/426 (with a corresponding JSFiddle : http://jsfiddle.net/2m4b4bb2/3/ )