当单击返回 false 时，检查绑定不起作用答案

【问题标题】：Checked binding not working when click returns false当单击返回 false 时，检查绑定不起作用
【发布时间】：2017-08-20 10:10:14
【问题描述】：

我在检查和点击绑定时遇到问题。

我希望有用于选择多行的复选框，并且我希望能够拒绝取消选择最后一个值。

我能得到的最好的是this。

有一个问题，当我点击最后一个复选框时，它不会取消选中，但选中的绑定仍然会从数组中删除最后一个值。

请帮助解决任何问题。

HTML：

<div id="bookingResources" class="listcontrol">
  <!-- ko foreach:resources -->
  <div class="li" data-bind="css:{ 'selected':$root.isResourceSelected($data) }">
    <a href="#" data-bind="click:$root.selectResource">
      <span data-bind="text:Name"></span>
      <input class="right" type="checkbox" data-bind="click:$root.checkboxClick, clickBubble:false, value:Id, checked:$root.resourceIds"/>
    </a>
  </div>
  <!-- /ko -->
</div>

JS：

var model = function(){
    var self = this;

  self.resources = [{"Id":4612,"Name":"John"},{"Id":4613,"Name":"Tom"},{"Id":4614,"Name":"Marty"}];

  self.resourceIds = ko.observableArray([4612]);

    self.isResourceSelected = function(resource) {
            return self.resourceIds.indexOf(resource.Id) >= 0;
    }

    self.selectResource = function (resource) {
        if (self.isResourceSelected(resource)) {
            if (self.resourceIds().length > 1) { // the last not remove
                self.resourceIds.remove(resource.Id);
            }
        } else {
                self.resourceIds.push(resource.Id);
        }
    }

  self.checkboxClick = function(resource) {
    if (self.resourceIds().length != 1)
      return true;

    return self.resourceIds()[0] != resource.Id;
  }

  //subscribe
  self.resourceIds.subscribe(function(newValue) {
    console.log("Selected resorces (" + newValue.length + "): " + newValue);
  });
}

ko.applyBindings(new model(), document.getElementById("bookingResources"))

【问题讨论】：

标签： javascript jquery knockout.js knockout-3.0

【解决方案1】：

好的，我查了一下checked binding的敲除源码发现，就是简单的绑定点击事件HERE。

所以我只需要 jquery 来停止复选框元素上的 eventPropagation。调用 event.stopimmediatepropagation() 应该可以完成这项工作。

我可以一起停止事件传播，所以检查绑定不会处理当前点击：

self.checkboxClick = function(resource, event) {
    if (self.resourceIds().length != 1)
        return true;

    if(self.resourceIds()[0] == resource.Id)
    {
        event.stopImmediatePropagation();
        return false;
    }

    return true;
}

【讨论】：