Question

我想要一个带有敲除的复选框，这样当我点击周围的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/

Answer 1

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

这样可以防止在直接点击复选框时调用toggleSelected方法：

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

演示JSFiddle.

基于父div的淘汰复选框选择

1 个答案: