Knockout循环中复选框选中状态变更时的禁用控制问题

我来帮你搞定这个Knockout.js的复选框联动问题！根据你描述的规则，我们可以通过给每行的子项添加计算属性（控制启用状态）和订阅事件（处理勾选后的联动）来实现需求。

需求回顾 #

• 初始状态：仅Copy Form和Unlink可用，Workflow、Reports禁用
• 勾选Copy Form：启用Workflow、Reports，同时禁用Unlink
• 勾选Unlink：清空其他所有复选框并禁用它们

第一步：修改HTML，添加enable绑定 #

给每个复选框绑定对应的启用状态控制属性，确保只有符合条件时才允许操作：

<tbody data-bind="foreach: SubAccountsToCopy()">
  <tr>
    <td class="col-sm-4" data-bind="text: linkedAccountName"></td>
    <td class="col-sm-1" data-bind="text: linkedVersion"></td>
    <td class="col-sm-1" data-bind="text: version"></td>
    <td>
      <input style="vertical-align: middle" type="checkbox" 
             data-bind="checked: copyForm, 
                        enable: canEnableCopyForm,
                        attr: { 'id': 'copyForm' + $index()}">
      &nbsp;
      <label data-bind="attr: { 'for': 'copyForm' + $index()}">Copy Form</label>
    </td>
    <td title="Also copy the Form Workflow " style="width:100px;">
      <input style="vertical-align: middle" type="checkbox" 
             data-bind="checked: copyWorkflow, 
                        enable: canEnableWorkflow,
                        attr: { 'id': 'copyWorkflow' + $index()}" />
      &nbsp;
      <label data-bind="attr: { 'for': 'copyWorkflow' + $index()}">Workflow</label>
    </td>
    <td title="Also copy the Report Settings " style="width:100px;">
      <input style="vertical-align: middle" type="checkbox" 
             data-bind="checked: copyReportSettings, 
                        enable: canEnableReportSettings,
                        attr: { 'id': 'copyReportSettings' + $index()}" />
      &nbsp;
      <label data-bind="attr: { 'for': 'copyReportSettings' + $index()}">Reports</label>
    </td>
    <td title="Will unlink the SubAccount form from the Master Account " style="width:100px;">
      <input style="vertical-align: middle" type="checkbox" 
             data-bind="checked: unlink, 
                        enable: canEnableUnlink,
                        attr: { 'id': 'unlink' + $index()}" />
      &nbsp;
      <label data-bind="attr: { 'for': 'unlink' + $index()}">Unlink</label>
    </td>
  </tr>
</tbody>

第二步：扩展子项ViewModel，添加联动逻辑 #

因为每行是独立控制的，我们需要给SubAccountsToCopy里的每个子对象添加计算属性和订阅事件，实现状态联动：

// 假设你的原始JSON数据是rawSubAccounts数组
var SubAccountsToCopy = ko.observableArray(
  rawSubAccounts.map(function(item) {
    // 将原始属性转为Knockout可观察对象
    var copyForm = ko.observable(item.copyForm || false);
    var copyWorkflow = ko.observable(item.copyWorkflow || false);
    var copyReportSettings = ko.observable(item.copyReportSettings || false);
    var unlink = ko.observable(item.unlink || false);

    // 计算属性：控制Copy Form的启用状态
    var canEnableCopyForm = ko.computed(function() {
      // Unlink未勾选时，Copy Form才可用
      return !unlink();
    });

    // 计算属性：控制Unlink的启用状态
    var canEnableUnlink = ko.computed(function() {
      // Copy Form未勾选时，Unlink才可用
      return !copyForm();
    });

    // 计算属性：控制Workflow和Reports的启用状态
    var canEnableWorkflow = ko.computed(function() {
      // Copy Form已勾选且Unlink未勾选时才可用
      return copyForm() && !unlink();
    });
    var canEnableReportSettings = canEnableWorkflow; // 和Workflow规则一致，直接复用

    // 订阅Unlink变化：勾选Unlink时清空其他所有复选框
    unlink.subscribe(function(newValue) {
      if (newValue) {
        copyForm(false);
        copyWorkflow(false);
        copyReportSettings(false);
      }
    });

    // 订阅Copy Form变化：勾选Copy Form时清空Unlink
    copyForm.subscribe(function(newValue) {
      if (newValue) {
        unlink(false);
      }
    });

    // 返回扩展后的子项对象
    return {
      linkedAccountName: item.linkedAccountName,
      linkedVersion: item.linkedVersion,
      version: item.version,
      copyForm: copyForm,
      copyWorkflow: copyWorkflow,
      copyReportSettings: copyReportSettings,
      unlink: unlink,
      canEnableCopyForm: canEnableCopyForm,
      canEnableUnlink: canEnableUnlink,
      canEnableWorkflow: canEnableWorkflow,
      canEnableReportSettings: canEnableReportSettings
    };
  })
);

逻辑说明 #

1. 初始状态：默认copyForm和unlink为false，因此canEnableCopyForm、canEnableUnlink为true（可用），canEnableWorkflow、canEnableReportSettings为false（禁用），完全符合初始需求；
2. 勾选Copy Form：触发canEnableUnlink变为false（禁用Unlink），同时启用Workflow和Reports，并且自动清空Unlink的勾选状态；
3. 勾选Unlink：触发所有其他复选框的启用状态变为false，同时自动清空它们的勾选状态，确保只有Unlink处于勾选可用状态；

每行的逻辑完全独立，不会互相干扰，完美实现你要的交互效果~

内容的提问来源于stack exchange，提问作者Stephen McCormick