http://stackoverflow.com/questions/42640658/knockout-js-checked-binding-is-not-working-with-bootstrap-data-toggle-toggle

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<div id="categoryMain">
    <input data-bind="bootstrapToggle: Active" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="primary" data-offstyle="danger" type="checkbox">
    <br/>
    <button type="button" class="btn btn-primary" data-bind="click: AddEditSubCategory">Save</button>
</div>

JavaScript

var SubCategoryViewModel = {
  Active: ko.observable(false),
  AddEditSubCategory: function () {
     console.log(SubCategoryViewModel.Active());
  }
}

function setBootstrapToggleState(element, value) {
    var disabled = $(element).prop('disabled');
    $(element).bootstrapToggle('enable');
    $(element).bootstrapToggle(value ? 'on' : 'off');
    if (disabled)
      $(element).bootstrapToggle('disable');
  }
  
ko.bindingHandlers.bootstrapToggle = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
      $(element).bootstrapToggle();
      setBootstrapToggleState(element, ko.utils.unwrapObservable(valueAccessor()))
      $(element).on('change', function() {
        valueAccessor()($(this).prop('checked'));
      });
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
      var vStatus = $(element).prop('checked');
      var vmStatus = ko.utils.unwrapObservable(valueAccessor());
      if (vStatus != vmStatus) {
        setBootstrapToggleState(element, vmStatus);
      }
    }
  };
  
$(document).ready(function () {

  ko.applyBindings(SubCategoryViewModel, document.getElementById("categoryMain"));
});