Question

当我点击父div时，我正在使用knockout并尝试更改复选框的值。这很好但现在我无法在实际单击复选框时更改复选框值...复选框后的范围用于调试目的，以查看变量的设置。我尝试使用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>与点击复选框本身实际上相同。

在父div上单击更改复选框值

1 个答案: