Флажки отключения нокаута внутри цикла for при изменении - PullRequest
Новая
       19

Флажки отключения нокаута внутри цикла for при изменении

0 голосов
/ 21 мая 2018

У меня есть список флажков в наблюдаемом массиве, и я хочу контролировать включение и отключение флажков, когда они установлены, для каждой строки.Например, при первом входе в диалог будут включены только «Копировать форму» и «Отключить».Если «Копировать форму» отмечен, то «Рабочий процесс» и «Отчетность» будут включены, но «Отключить» мы бы отключили.Если установлен флажок «Отключить», все остальные флажки будут очищены от значений и отключены.

Вот скриншот того, что я пытаюсь выполнить:

enter image description here

Код (удалены некоторые вещи, которые только усложняют то, что я пытаюсь описать):

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 - это массив JSON, сопоставленный с наблюдаемым.

1 Ответ

0 голосов
/ 22 мая 2018

Так что решение оказалось немного проще, чем я думал.Поскольку все флажки являются наблюдаемыми, они реагируют на изменения, поэтому вы можете использовать их в логике: 

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

...