jquery - radio 和下拉到相同的可观察值 - knockout

Question

我为单选列表“选中”数据绑定(bind)和下拉列表“值”数据绑定(bind)分配了相同的可观察值

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

Answer 1

对于提供的 fiddle ，我在您的 html 中发现了两个不同的问题

1. 在 foreach 绑定(bind)上下文更改为当前项时，您需要使用 $parent 访问 selectedCar 属性。
2. 输入/ radio 位于带有文本绑定(bind)的标签内，处理此绑定(bind)时将替换所有内部内容

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

编辑

好吧，我知道发生了什么事，当您从 radio 中单击一个选项时，该项目不是选择标记的有效项目，因为它不在 options 数组中，然后 knockout 设置 value 未定义，导致 radio 被取消选择。

因此，一种替代方法是在选择标记上使用 valueAllowUnset: true (文档 here )

请查看这个更新的 fiddle https://jsfiddle.net/tbdo4rxq/