knockout.js - 基于父 div 的 knockout 复选框选择

Question

我希望有一个复选框绑定(bind)有 knockout ，这样当我点击周围的 div 时它会选中该复选框。

下面是我所追求的，但只有当您单击 div(而不是复选框)时，click 事件才会起作用。我认为这是因为同时发生了点击和实际的复选框选择事件。

<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/

Answer 1

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

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

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

演示 JSFiddle.