Knockout + Bootstrap 3 Radio Buttons

  The bootstrap buttons   binding are still not good.

•     knockout uses the click event within the checked binding to tigger the underlaying observable to change
•     Bootstrap subscribes on the click event to do the toggling but calls e.preventDefault() .that is why ko is not notice.

   Create a a custom binding handler will work where the user subscribe on the change event  and keep the  observables value there:

ko.bindingHandlers.bsChecked =
{
  init: function (element, valueAccessor, allBindingsAccessor,
  viewModel, bindingContext)
{
    var value = valueAccessor();
    var newValueAccessor = function ()
{
      return
{
        change: function ()
{
          value(element.value);
        }
      }
    };
    ko.bindingHandlers.event.init(element, newValueAccessor,
    allBindingsAccessor, viewModel, bindingContext);
  },
  update: function (element, valueAccessor, allBindingsAccessor,
  viewModel, bindingContext)
{
    if ($(element).val() == ko.unwrap(valueAccessor()))
{
      setTimeout(function ()
{
        $(element).closest('.btn').button('toggle');
      }, 1);
    }
  }
}

  And use it in the view with:

<label class="btn btn-primary">
  <input type="radio" name="options" id="option1" value="1"
    data-bind="bsChecked: optionsValue"> Option 1
</label>

Example using Bootstrap 3.0.2 JSFiddle.

Example using Bootstrap 3.2.0 JSFiddle.

   Try this code:

<div class="btn-group" data-toggle="buttons">
  <label data-bind="css: { active: !HideInLeaderboards() },
    click: function () { HideInLeaderboards(false); },
    clickBubble: false"
    class="btn btn-default">
   Show Name
  </label>
  <label data-bind="css: { active: HideInLeaderboards() },
    click: function () { HideInLeaderboards(true); },
    clickBubble: false" class="btn btn-default">
   Hide Name
  </label>
</div>

    Try  with the different handler will work.

  For ex:

ko.bindingHandlers.bsChecked =
{
  init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
{
    var value = valueAccessor();
    var newValueAccessor = function ()
{
      return
{
        change: function ()
{
          value(element.value);
        }
      }
    };
    if ($(element).val() == ko.unwrap(valueAccessor()))
{
      $(element).closest('.btn').button('toggle');
    }
    ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
  }
}