當我單擊敲除表行中的復選框時，tr單擊事件將覆蓋復選框狀態更改

Question

我有一個帶復選框的淘汰表（這里的例子，我每行限制一個復選框）。 單擊一個復選框時，它應該翻轉狀態（如您所料）。 但是，我在表格行上也有一個點擊事件和選擇事件，這與復選框有沖突...

<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事件，但這會阻止表行上的click事件的操作，在任何情況下都可以正常工作。 我發現點擊一行的復選框正確地改變了它的狀態，但是當行點擊它的東西時它會被放回去。

Answer 1

我使用了一個實際的復選框，不確定這是否是您的要求，無論如何這是帶有復選框的列

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

使用帶有選中綁定的復選框處理設置Excluded標志並同時選中復選框。 在行單擊處理程序中，我返回true以允許事件向下傳播到復選框，如果沒有此復選框將無效，因為事件不會傳播到它

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

這是一個工作示例的小提琴，我在底部添加了一個輸入，顯示了Excluded的狀態

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