3

チェックボックスをノックアウトにバインドして、周囲の 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;
    };
}));

これは、次の質問に似ています:ノックアウト - チェックボックスのセットから外側のコンテナー css をバインドする方法は?

ただし、提案された解決策は、チェックボックスとコンテンツをラベルでラップすることですが、これは機能しますが、行に収まるコンテンツがかなりあり、ラベルが非常に制限されているため、これを行いたくありません。

この動作を作成する別の方法はありますか?

http://jsfiddle.net/BgFe9/

4

1 に答える 1

1

考えられる回避策の 1 つ (あまり良い方法ではありません) は、チェックボックスに「空の」クリック バインディングを定義し、clickBubble: false.

toggleSelectedこれにより、チェックボックスを直接クリックしたときにメソッドが呼び出されなくなります。

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

JSFiddle のデモ。

于 2013-07-19T12:22:53.600 に答える