Knockout disabling check boxes within a for loop upon change - checkbox

Question

I have a list of check boxes in an observable array and I want to control the enabling and disabling of the check boxes when they are selected, per row. For example, when entering for the first time in the dialog, only the "Copy Form" and "Unlink" would be enabled. If "Copy Form" is checked, then the "Workflow" and "Reporting" would be enabled, but the "Unlink" we would be disabled. If "Unlink" is checked, then all other check boxes would be cleared of values and disabled.
Here is a screen shot of what I am trying to accomplish:
The code (removed some stuff that just complicates what I am trying to describe):
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()}">
<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()}" />
<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()}" />
<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()}" />
<label data-bind="attr: { 'for': 'unlink' + $index()}">Unlink</label>
</td>
</tr>
The javascript side is an JSON array mapped to the observable.

Answer 1

So the solution was a bit easier than I thought. Since all the checkboxes are observables, they react to changes, so you can use them in the logic:
<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()}">
<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()}" />
<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()}" />
<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()}" />
<label data-bind="style: {color: copyForm() ? 'lightgray' : 'black'}, attr: { 'for': 'unlink' + $index()}">Unlink</label>
</td>
</tr>