Question

此复选框的高级版本不仅基于现有数据进行设置，而且页面还必须以多种方式响应用户通过手动选中或取消选中复选框来更改复选框。

想象一下，您有一个murderCaseModel列出了犯罪的各种Witnesses。

这是一个小提琴：

http://jsfiddle.net/maxgrr/j6fm7162/6/

要求如下：

已经完成

如果加载的数据中存在上一个witnesses，请在页面加载时设置框的checked状态
```
<input type='checkbox' data-bind='checked: numWitnesses() > 0'></input>
```
删除Witness
添加Witness

TODO

切换复选框会导致页面上的其他区域显示或消失

如果用户将其切换为“否”（未选中），我们会将见证显示区域设为INVISIBLE（理想情况下，从DOM中删除）并删除所有Witness个对象。
如果切换到“是”＆＃39;（选中），我们会使见证显示区域可见，并确保至少有一个Witness对象可供用户填写。< / LI>

这整个问题对我来说非常棘手，并且确定了复选框的自动值，但也很难掌握用户选择的值。任何帮助深表感谢。这是一个很酷的功能！

Answer 1

您可以使用computed让wereThereAnyWitnesses字段更智能一点：

self.wereThereAnyWitnesses = ko.computed({
    read: function() {
        return self.numWitnesses() > 0;
    },
    write: function(wereThereAnyWitnesses) {
        if (!wereThereAnyWitnesses && self.numWitnesses() > 0) {
            if (!confirm("Remove all current witnesses?"))
                return self.wereThereAnyWitnesses.notifySubscribers();
            else
                self.witnesses.removeAll();
        }

        if (wereThereAnyWitnesses && self.numWitnesses() == 0)
            self.addWitness();
        }
}, this);

在你的HTML中：

<input type='checkbox' data-bind='checked: wereThereAnyWitnesses' />

请参阅Fiddle

Answer 2

您可以使用jQuery。首先，确保在头标记中包含了jQuery库。只需在头标记中复制以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

然后，使用以下代码查看是否选中了复选框：

<script type="text/javascript">
if ($('#the_checkbox').is(":checked"))
{
  $('#the_textarea').hide();
}
</script>

这是输入：

<input type="checkbox" id="the_checkbox" />

KnockoutJS +高级复选框功能

2 个答案: