knockout.js - 親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」の内部をコメントアウトしても、チェックボックスは正しく機能しません。