I'm using knockout and trying to change the value of a checkbox when I click on the parent div. This works great but now I can't change the checkbox value when actually clicking on the checkbox...the span after the checkbox is for debugging purposes to see what the variable is set to. I tried using clickBubble: false but that didn't seem to help either.
I have the following mapping:
var mapping = {
'teams': {
create: function(options) {
options.data.active=ko.observable(false);
options.data.flipActive= function(team, event){
if(!$(event.target).hasClass('team_checkbox'))
team.active(!team.active());
}
return options.data;
}
}
}
And the following HTML:
<div id="selectTeamsArea" data-bind="foreach: teams">
<div class="teams_result_data" data-bind="click: flipActive, clickBubble: false">
<img class="floatLeft" height="40" width="40" data-bind="attr: {src: searchImgLink}" >
<div>
<p data-bind="text: searchBoldName"></p>
<p data-bind="text: searchThirdLine"></p>
</div>
<input class="right team_checkbox" type="checkbox" name="teams" data-bind="value: idString, checked: active, clickBubble: false" />
<span data-bind="text: active"></span>
</div>
<div class="clear"></div>
</div>
Any help is greatly appreciated.
UPDATE, INCLUDED JSFIDDLE: http://jsfiddle.net/YYUed/
^Even if you comment out the innards of the "flipActive" the checkbox doesn't work right.