2

当我单击父 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”的内部，复选框也不能正常工作。

4

1 回答 1

3

我认为最好的方法是用 , 替换你<div>的<label>（<input>仍然）作为<label>. 这种方法不仅更具语义性和可访问性，而且它的优点是单击<label>与单击复选框本身实际上是相同的。

于 2013-04-10T14:58:11.927 回答