选中1行后禁用所有复选框

Question

我想禁用除用户选择的所有行以外的所有复选框。只能进行一项选择，并且他们应该能够取消选择一项，从而重新启用其他复选框。我创建了一个简单的示例作为起点。我是Knockout的新手，被困住了。谢谢你的帮助。

var DuplicatesVM = (function() {

  var self = this;
  self.Duplicates = ko.observableArray();
  self.selectedItems = ko.observableArray([]);

});

var DuplicateVM = (function(data) {

  var self = this;

  //Map JS to Item
  ko.mapping.fromJS(data, {}, self);

});

var rawData = {
  "@odata.context": "Data",
  "value": [{
    "dos_personId": "c1",
    "dos_lastname": "Smith",
    "dos_firstname": "Joe",
    "dos_name": "Smith, Joe   ",
  }, {
    "dos_personId": "c2",
    "dos_lastname": "Blow",
    "dos_firstname": "Joe",
    "dos_name": "Blow, Joe   ",
  }, {
    "dos_personId": "c3",
    "dos_lastname": "Davis",
    "dos_firstname": "Joe",
    "dos_name": "Davis, Joe   ",
  }]
};


$(document).ready(function() {
  var DupVM = new DuplicatesVM();
  $.each(rawData.value, function(k, l) {
    //alert(JSON.stringify(l));
    DupVM.Duplicates.push(new DuplicateVM(l));
  });
  ko.applyBindings(DupVM);
});


//* collapsible debug section script
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

/* Style the button that is used to open and close the collapsible content */

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}


/* Add a background color  if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

.active,
.collapsible:hover {
  background-color: #ccc;
}


/* Style the collapsible content. Note: hidden by default */

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Option</th>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: Duplicates">
    <td>
      <input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedItems"></intput>
    </td>
    <td data-bind="text: dos_personId"></td>
    <td data-bind="text: dos_name"></td>
  </tbody>

</table>
<div id="debug" style="clear: both">
  <h2 class="collapsible">Show Debug</h2>
  <div class="content" data-bind="text: ko.toJSON($data)"></div>
  <hr/>
</div>

Answer 1

您可以为enable绑定添加一个功能来检查已检查项目的集合。

enable: $root.selectedItems().length===0 || $root.selectedItems().indexOf($data) >= 0

示例：

var DuplicatesVM = (function() {
  var self = this;
  self.Duplicates = ko.observableArray();
  self.selectedItems = ko.observableArray([]);
});

var DuplicateVM = (function(data) {
  var self = this;
  //Map JS to Item
  ko.mapping.fromJS(data, {}, self);
});

var rawData = { "@odata.context": "Data", "value": [{ "dos_personId": "c1", "dos_lastname": "Smith", "dos_firstname": "Joe", "dos_name": "Smith, Joe   ", }, { "dos_personId": "c2", "dos_lastname": "Blow", "dos_firstname": "Joe", "dos_name": "Blow, Joe   ", }, { "dos_personId": "c3", "dos_lastname": "Davis", "dos_firstname": "Joe", "dos_name": "Davis, Joe   ", }] }; 

$(document).ready(function() {
  var DupVM = new DuplicatesVM();
  $.each(rawData.value, function(k, l) {
    //alert(JSON.stringify(l));
    DupVM.Duplicates.push(new DuplicateVM(l));
  });
  ko.applyBindings(DupVM);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Option</th>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: Duplicates">
    <td>
      <input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedItems, enable: $root.selectedItems().length===0 || $root.selectedItems().indexOf($data) >= 0" />
    </td>
    <td data-bind="text: dos_personId"></td>
    <td data-bind="text: dos_name"></td>
  </tbody>

</table>