更改父div点击时的复选框值 [英] Change checkbox value on parent div click

问题描述

当我单击父div时，我正在使用基因剔除并尝试更改复选框的值.这很好用，但是现在当我实际单击复选框时，我无法更改复选框的值...复选框之后的跨度用于调试目的，以查看变量设置为什么.我尝试使用clickBubble:false，但这似乎也无济于事.

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.

我有以下映射:

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/

UPDATE, INCLUDED JSFIDDLE: http://jsfiddle.net/YYUed/

^即使您注释掉了"flipActive"的内在特性，该复选框也无法正常工作.

^Even if you comment out the innards of the "flipActive" the checkbox doesn't work right.

推荐答案

我认为最好的方法是将<div>替换为

I think the best way to do this would be to replace your <div> with a <label>, with the <input> (still) as a child element of the <label>. That approach is not only more semantic and accessible but it has the advantage that clicking on the <label> will be effectively the same as clicking on the checkbox itself.

这篇关于更改父div点击时的复选框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！