checkbox - 更改时取消禁用 for 循环中的复选框

Question

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

这是我要完成的屏幕截图：

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

html:

<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" id="copyForm" type="checkbox" data-bind="checked: copyForm, 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, 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, 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, attr: { 'id': 'unlink' + $index()}" />&nbsp;
        <label data-bind="attr: { 'for': 'unlink' + $index()}">Unlink</label>
    </td>
</tr>

javascript 端是一个映射到 observable 的 JSON 数组。

标签： checkboxknockout.jsobservable

Answer 1

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

<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>