更改父div的复选框值单击

Question

我正在使用敲除，并尝试更改复选框的值时，我单击父div。这很好用，但是现在当我实际点击复选框时，我无法改变复选框的值...复选框后的范围用于调试，以查看变量设置为的内容。我尝试使用clickBubble：false，但这似乎也没有帮助。

我有以下映射：

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; 
      } 
     } 
    } 

和下面的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> 

任何帮助是极大的赞赏。

更新，收录的jsfiddle：http://jsfiddle.net/YYUed/

^即使您注释掉“flipActive”的内部结构的复选框不工作的权利。

Answer 1

我认为最好的办法是将<div>替换为<label>，将<input>（仍然）作为<label>的子元素。这种方法不仅更具语义和可访问性，但其优点是点击<label>将与点击复选框本身的效果相同。