当我单击挖空表行中的复选框时,tr click事件会覆盖复选框状态更改

时间:2015-06-03 11:57:49

标签: javascript checkbox knockout.js

我有一个带复选框的淘汰表(这里的例子,我每行限制一个复选框)。 单击一个复选框时,它应该翻转状态(如您所料)。 但是,我还在表格行上有一个点击事件和选择事件,这与复选框...

相冲突
<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事件的操作,这在任何情况下都可以正常工作。 我发现点击一行的复选框可以正确地改变它的状态,但是当行点击它的东西时会被放回去。

1 个答案:

答案 0 :(得分:5)

我使用了一个实际的复选框,不确定这是否是您的要求,无论如何这是带有复选框的列

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

使用带有选中绑定的复选框处理设置Excluded标志并同时选中复选框。在行单击处理程序中,我返回true以允许事件向下传播到复选框,如果没有这个复选框将不起作用,因为事件不会传播到它

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

这是一个工作示例的小提琴,我在底部添加了一个输入,显示了排除的状态

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