Buttonset checkboxes BIU with knockoutJS

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="https://github.com/gvas/knockout-jqueryui/releases/download/v0.5.2/knockout-jqueryui.js"></script>
<select data-bind="options:items, optionsCaption: 'Choose item...', optionsText: 'name', value: selected"></select>

<div id="format" data-bind="buttonset: {}">
      <!-- ko with: selected -->
    <!--
    <input type="checkbox"  class="ui-button" data-bind="attr: { 'id' : 'titleBold' + ID },checked: isBold" >
    <label data-bind="attr : { for : 'titleBold' + ID}">B</label>
    <input type="checkbox" class="ui-button" data-bind="attr: { 'id' : 'titleItalic' + ID }, checked: isItalic">
    <label data-bind="attr : { for : 'titleItalic' + ID}">I</label>
    <input type="checkbox" class="ui-button" data-bind="attr: { 'id' : 'titleUnderlined' + ID },checked: isUnderlined">
    <label data-bind="attr : { for : 'titleUnderlined' + ID}">U</label>
    -->
    <!-- /ko -->    
</div>

<div data-bind="with: selected, jqButtonset: {}">
    
    <!-- ko foreach: buttons -->
        <input class="ui-helper-hidden-accessible" type="checkbox"  data-bind="attr: { 'id' : letter}, checked: isSelected" />
        <label 
        rule="button" aria-disabled="false"
        class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active" 
        data-bind="attr: { 'for' : letter},
                   hasFocus: $root.bIsSelected,
                   event: { mouseover: mouseOver, mouseout: mouseOut },
                   css: { 'ui-state-active' : isSelected, 'ui-state-focus' : isSelected, 'ui-state-hover' : isHovering, 'ui-corner-left': isFirst, 'ui-corner-right': isLast }">
            <span class="ui-button-text" data-bind="text: letter"></span>
        </label>
    <!-- /ko -->                                 
</div>
     
   
<hr/>
<pre data-bind="text: ko.toJSON($root,null,2)"></pre>

JavaScript

ko.bindingHandlers.jqButtonset = {
    init: function (element) {
        $(element).buttonset(); // Turns the element into a jQuery UI button
    },
    update: function (element, valueAccessor) {
        var currentValue = valueAccessor();
        // Here we just update the "disabled" state, but you could update other properties too
        $(element).buttonset("option", "disabled", currentValue.enable === false);
    }
};

FormatButton = function(data)
{
  var self = this;
    
   self.letter = ko.observable(data.letter);
    
   //Styles for button group 
   self.isFirst = ko.observable(data.isFirst);
   self.isLast = ko.observable(data.isLast);
   self.isHovering = ko.observable(false);
   self.isSelected = ko.observable(false);
    
   self.mouseOver = function(){ self.isHovering(true);};
   self.mouseOut = function(){ self.isHovering(false); };
}

Title = function(data){
    var self = this;

    self.ID = data.ID;    
    self.name = ko.observable(data.name);
    
    self.buttons = ko.observableArray([
        new FormatButton( {isFirst: true, letter: 'B' }),
        new FormatButton( {letter: 'I'}),
        new FormatButton( {isLast: true, letter: 'U'})
    ]); 
    
    
    return self;
};

viewModel = function(){
    var self = this;
    
    // input
    self.items = ko.observableArray([
        new Title( {ID: 1, name: 'The first one', isBold: true, isItalic: false }),
        new Title( {ID: 2, name: 'The second one', isBold: false, isItalic: true, isUnderlined: true })
    ]); 
    self.selected = ko.observable();
};


ko.applyBindings( new viewModel() );