knockout.js - knockout checkbox selection based on parent div -

i have checkbox bound knockout when click on surrounding div selects checkbox.

below i'm after, click event works when click div (not checkbox). think because both click , actual checkbox selection event occurring.

<div class="checkbox-row" data-bind="click: toggleselected">     <input type="checkbox" data-bind="checked: selected" />     <div data-bind="text: title"></div> </div>  ko.applybindings(new (function () {     var self = this;     self.title = ko.observable('some text');     self.selected = ko.observable(false);     self.toggleselected = function() {         self.selected(!self.selected());         return false;     }; })); 

this similar following question: knockout - how bind outer container css set of checkboxes?

however solution proposed wrap checkbox , content in label, works dont want have quite bit of content fit in row , label quite restrictive.

is there alternative way create behavior?

http://jsfiddle.net/bgfe9/

one possible workaround (which not nice) define "empty" click binding on checkbox , set clickbubble: false.

this prevent calling of toggleselected method when clicking directly on checkbox:

<input type="checkbox" data-bind="checked: selected,                                    click: function() { return true; },                                    clickbubble: false" /> 

demo jsfiddle.