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

Question

<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分配true和false，但是list view有时未显示该复选框。

如何在不失去风格的情况下完成？

Answer 1

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

同一文档中的不同DOM元素不得使用相同的ID。 那是HTML规范。 如果这样做，您会得到奇怪的行为。

为避免重复ID，您可以做两件事：

1）删除ID，然后将复选框包装在label标签内，这样就不需要ID：

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

2）绑定id属性，并使用$index生成唯一的id，如下所示：

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

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