基于父 div 的剔除复选框选择答案

【问题标题】：knockout checkbox selection based on parent div基于父 div 的剔除复选框选择
【发布时间】：2013-07-18 17:11:48
【问题描述】：

我希望有一个与剔除绑定的复选框，以便当我单击周围的 div 时，它会选中该复选框。

以下是我所追求的，但单击事件仅在您单击 div（而不是复选框）时起作用。我认为这是因为单击和实际的复选框选择事件都在发生。

<div class="checkbox-row" data-bind="click: toggleSelected">
    <input type="checkbox" data-bind="checked: selected" />
    <div data-bind="text: title"></div>
</div>

ko.applyBindings(new (function () {
    var self = this;
    self.title = ko.observable('some text');
    self.selected = ko.observable(false);
    self.toggleSelected = function() {
        self.selected(!self.selected());
        return false;
    };
}));

这类似于下面的问题：Knockout - How to bind outer container css from set of checkboxes?

但是，建议的解决方案是将复选框和内容包装在标签中，这可行，但我不想这样做，因为我有相当多的内容可以放入行中，并且标签非常严格。

是否有其他方法可以创建此行为？

http://jsfiddle.net/BgFe9/

【问题讨论】：

您当前的解决方案有什么问题？你的小提琴似乎工作正常......
@nemesv 点击实际的复选框，我也更新了问题
我知道一个解决方案，但它并不好：您需要在复选框上绑定一个空的 click 并设置 clickBubble: false ：jsfiddle.net/pJuM5
@nemesv 感谢这是一个比使用标签更好的解决方案，即使它不整洁也可以使用。我仍然很想知道是否有人有更整洁的。您应该将其发布为答案。

标签： knockout.js

【解决方案1】：

一种可能的解决方法（不太好）是在复选框上定义一个“空”点击绑定并设置clickBubble: false。

这将阻止在直接单击复选框时调用toggleSelected方法：

<input type="checkbox" data-bind="checked: selected, 
                                  click: function() { return true; }, 
                                  clickBubble: false" />

演示JSFiddle.

【讨论】：