Как я могу отключить / включить раскрывающийся список, встроенный в таблицу, сопоставленную с наблюдаемым массивом нокаута

Я хотел бы отключить / включить раскрывающийся список, встроенный в таблицу в форме, пока не будет выбрано определенное значение в раскрывающемся списке предшественника.

Вот то, что я попробовал, это, кажется, не работает:

<tbody data-bind="foreach:studentData">
    <tr>
        <td><span data-bind="text:rollNo"></span></td>
        <td><select class="form-control" data-bind="options:$parent.sexDropDown,optionsText:'name',optionValue:'id',value:sex,optionsCaption:'-Select-'"></select></td>
        <td><select class="form-control" data-bind="options:$parent.uniformTypeDropDown,optionsText:'name',optionValue:'id',value:uniform,enable:sex? (sex.id == 2):false,optionsCaption:'-Select-'"></select></td>
    </tr>
</tbody>

Пожалуйста, найдите связанную скрипку здесь

Для краткости я хочу, чтобы раскрывающийся список "Единый тип" в каждой из строк был включен в случае, если в раскрывающемся списке "Пол" выбран параметр "Женский", и его необходимо отключить во всех других сценариях.

1 ответ

Решение

Во-первых, ваш sex а также uniform свойства должны быть доступны для двухстороннего связывания:

self.studentData  = ko.observableArray([
  { rollNo: 1, sex: ko.observable(null), uniform: ko.observable(null) }
  //                ^^^^^^^^^^^^^^    ^           ^^^^^^^^^^^^^^    ^
  // This allows the `value` binding to write to the property
]);

Тогда в вашем enable связывание, вы можете использовать значение обновления в реальном времени:

enable: sex() ? (sex().id === 2) : false
//         ^^       ^^
// Because this property is now observable, you need to call it to extract
// its value

В обновленной скрипке: https://jsfiddle.net/ocd5qvr8/

Другие вопросы по тегам