当我在 knockout 表格行中点击复选框时，tr 点击事件会覆盖复选框状态的更改。

Question

我有一个带有复选框的knockout表格（为了方便起见，这里限制每行只有一个复选框）。 当单击复选框时，它应该翻转状态（正如您所期望的那样）。 但是，我还在表格行上设置了单击事件和选择事件，这与复选框产生了冲突...

<table>
  <tbody data-bind="foreach: namespace.divResults.model">
    <tr data-bind="click: $root.selectItem, css: {selected: $root.isSelected($data)}">
      <td data-bind="text: Title"></td>
      <td data-bind="text: Surname"></td>
      <td data-bind="text: PostCode"></td>
      <td><input type="checkbox" data-bind="checked: Excluded, click: $root.toggleExcluded"></td>
      <td data-bind="text: Notes" style="display:none"></td>
    <tr>
  <tbody>
<table>
<div>
  <!-- ko with: $root.selectedItem -->
  <textarea data-bind="textInput:Notes"></textarea>
</div>

以及JavaScript:

(function(ns) {
  ns.divResults = null;
  var resultsViewModel = function() {
    var self = this;
    self.model = ko.observableArray();
    self.selectedItem = ko.observable();
    self.selectItem = function(row){ self.selectedItem(row); }
    self.isSelected = function (row) { return self.selectedItem() === row; }

    self.toggleExcluded = function() {
      return true;
    }
  }
}

我尝试使用clickBubble事件，但这会阻止表格行上的点击事件的动作，在任何情况下都可以正常工作。 我发现的是，单击行复选框正确地更改其状态，但在行单击执行其操作后又被放回。

- JimFR

Answer 1

我使用了一个实际的复选框，不确定这是否符合你的要求，无论如何，这是带有复选框的列。

<td>
    <input type="checkbox" data-bind="checked: Excluded"/>
</td>

有一个带有选中绑定的复选框可以处理设置“排除标志”并同时选中复选框。在行点击处理程序中，我返回 true 以允许事件向下传播到复选框，否则复选框将无法工作，因为事件不会向下传播到它。

self.selectItem = function (row) {
     self.selectedItem(row);
     return true;
};

这里有一个带有可运行示例的fiddle代码，我在底部添加了一个输入框，可以显示“Excluded”的状态。请参考以下链接：

http://jsfiddle.net/5dk0hqnc/8/

- omerio

---

我的错，那些复选框是我原始代码中明确的输入，我把它们误传到了我的示例中！已编辑以反映这一点。 - JimFR