Checkbox 在更改时取消禁用for循环中的复选框

我在一个可观察的数组中有一个复选框列表，我想控制每行选中复选框时复选框的启用和禁用。例如，当第一次在对话框中输入时，只会启用“复制表单”和“取消链接”。如果选中“复制表单”，则将启用“工作流”和“报告”，但禁用“取消链接”。如果选中“取消链接”，则所有其他复选框中的值将被清除并禁用

以下是我试图实现的目标的屏幕截图：

代码（删除了一些使我试图描述的内容复杂化的内容）：

Html:

复印表格
工作流程
报告
解除链接

---

javascript端是一个映射到可观察对象的JSON数组。

因此解决方案比我想象的要简单一些。由于所有复选框都是可观察的，它们会对更改做出反应，因此您可以在逻辑中使用它们：

<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 title="Copy latest version of the form to this SubAccount" style="width:120px;">
        <input style="vertical-align: middle" id="copyForm" type="checkbox" data-bind="checked: copyForm, disable: unlink, attr: { 'id': 'copyForm' + $index()}">&nbsp;
        <label data-bind=" disable: unlink, style: {color: unlink() ? 'lightgray' : 'black'}, 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: copyForm, attr: { 'id': 'copyWorkflow' + $index()}" />&nbsp;
        <label data-bind="style: {color: copyForm() ? 'black' : 'lightgray'},  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: copyForm, attr: { 'id': 'copyReportSettings' + $index()}" />&nbsp;
        <label data-bind="style: {color: copyForm() ? 'black' : 'lightgray'}, 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, disable: copyForm, attr: { 'id': 'unlink' + $index()}" />&nbsp;
        <label data-bind="style: {color: copyForm() ? 'lightgray' : 'black'}, attr: { 'for': 'unlink' + $index()}">Unlink</label>
    </td>
</tr>

复印表格
工作流程
报告
解除链接

<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 title="Copy latest version of the form to this SubAccount" style="width:120px;">
        <input style="vertical-align: middle" id="copyForm" type="checkbox" data-bind="checked: copyForm, disable: unlink, attr: { 'id': 'copyForm' + $index()}">&nbsp;
        <label data-bind=" disable: unlink, style: {color: unlink() ? 'lightgray' : 'black'}, 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: copyForm, attr: { 'id': 'copyWorkflow' + $index()}" />&nbsp;
        <label data-bind="style: {color: copyForm() ? 'black' : 'lightgray'},  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: copyForm, attr: { 'id': 'copyReportSettings' + $index()}" />&nbsp;
        <label data-bind="style: {color: copyForm() ? 'black' : 'lightgray'}, 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, disable: copyForm, attr: { 'id': 'unlink' + $index()}" />&nbsp;
        <label data-bind="style: {color: copyForm() ? 'lightgray' : 'black'}, attr: { 'for': 'unlink' + $index()}">Unlink</label>
    </td>
</tr>