Блог

У меня одинаковое наблюдаемое значение, присвоенное для привязки данных списка радиостанций «checked» и для привязки данных выпадающего списка «value»

  <select name="controls" data-bind="options: cars(), optionsText:'make', optionsValue:'id', value: $root.selectedId, optionsCaption: 'Select One'"> </select>

 <div data-bind="foreach: cars">
      <div>
        <input type="radio" name="controls" data-bind="checked: $root.selectedId, checkedValue: id, value: id"><div data-bind="text:make">
      </div>
</div>
  

Поскольку выпадающий список всегда содержит некоторое значение по умолчанию «Выбрать один» или выбранное значение. Не позволяет пользователю делать выбор в списке переключателей. Когда пользователь нажимает на кнопку радио, она не проверяется / не выбирается.

Я могу исправить двумя разными наблюдаемыми, но по какой-то причине я хочу остаться с тем же наблюдаемым

jsFiddle —https://jsfiddle.net/9vm01e3r/2 /

Для предоставленной скрипки я определяю две разные проблемы в вашем html

1. Внутри foreach контекста привязки изменяется на текущий элемент, который вам нужно использовать $parent для доступа к selectedCar свойству.
2. Ввод / радио был внутри метки с текстовой привязкой, когда эта привязка обрабатывается, заменяется все внутреннее содержимое

Ваш HTML должен выглядеть примерно так

  <div data-bind="foreach: cars">
 <label data-bind="text:name"></label>
 <input type="radio" data-bind="checked: $parent.selectedCar, checkedValue: id, value: id" />
 </div>
  

Редактировать

Хорошо, я знаю, что происходит, когда вы нажимаете опцию из радиостанций, этот элемент не является допустимым элементом для тега выбора, потому что его нет в options массиве, тогда нокаут устанавливает value значение undefined, в результате чего радиостанции будут отменены.

Таким образом, одной из альтернатив будет использование valueAllowUnset: true в теге выбора (документация здесь)

Пожалуйста, ознакомьтесь с этой обновленной скрипкой https://jsfiddle.net/tbdo4rxq /