从 JSON 数据检查列表视图中的复选框

Posted 2023-05-09

【中文标题】从 JSON 数据检查列表视图中的复选框

【英文标题】：Checking checkbox in listview from JSON data

【发布时间】：2016-01-04 16:54:34

【问题描述】：

<ol class ="lists" id ="list1"data-bind="foreach: quiz.questions" >
    <li class="lists" >
        <div>
            <label class="question_que"><span data-bind="text: Name"></label></span>
            <ul  data-bind="foreach: Options">
                <li >
                    <fieldset data-role="controlgroup">
                        <input type="checkbox" name="checkbox-1a" id="checkbox-1a" data-bind="checked:IsAnswer">
                        <label for="checkbox-1a" class="ch_box"><span data-bind="text:Name"> </span></label>
                    </fieldset>
                </li>
            </ul>
        </div>
    </li>
</ol>

KO 绑定正在工作，我在IsAnswer 中分配了真假，但list view 有时不显示复选框。

如何做到又不失风格？

【问题讨论】：

有时不显示什么？整个问题都被省略了吗？选项？

复选框，因为它在 foreach 内，所以不应该有静态的 id 属性。 id 在文档中应该是唯一的。

谢谢，它有效，但它失去了风格。

为什么只删除静态id后样式要改变？

【参考方案1】：

我想您正在使用像 #checkbox-1a 这样的 ID 选择器来设置控件的样式。

您不能对同一文档中的不同 DOM 元素使用相同的 ID。那是 html 规范。如果这样做，您可能会出现奇怪的行为。

为避免重复 id，您可以做两种不同的事情：

1) 去掉id，把checkbox包裹在label标签里面，这样就不需要id了：

<label class="ch_box">
  <input type="checkbox" .../>
  <span data-bind="text:Name"></span>
</label>

2) 绑定id属性，使用$index生成唯一id，像这样：

<label data-bind="
  attrid: 'check-box-q' + $parentContext.$index() + 'a' + $index()" ...

可能，使用这两种解决方案中的任何一种，您都必须更改 CSS 样式，但您没有在问题中显示它们

【讨论】：

因为它在两个foreach 循环内，$index 不足以成为唯一的。你也需要$parentContext.$index()。