使用jQuery - knockout.js操作DOM后，模型和ui不同步

Question

我有以下3个复选框，每次只能选中一个:

<div class="radio-rows-wrapper" style="padding-top: 10px">
<input type="checkbox" id="noMandateOption" name="mandate-option-selection" data-bind="checked: NoMandate"/></td>
<label for="no-mandate">No Mandate</label><br>
<input type="checkbox" id="electronicMandateOption" name="mandate-option-selection" data-bind="checked: ElectronicMandate" /></td>
<label for="electronic-mandate">Electronic Mandate</label><br>
<input type="checkbox" id="uploadMandateOption" name="mandate-option-selection" data-bind="checked: UploadMandate" /></td>
<label for="upload-mandate">Upload Mandate</label>
</div>

我也有三个部分应该显示或隐藏取决于哪个复选框被选中:

<div data-bind="if: NoMandate"></div
<div data-bind="if: ElectronicMandate"></div
<div data-bind="if: UploadMandate"></div

和以下jQuery更新复选框:

$('input[type="checkbox"]').on('change', function () {
$('input[name="' + this.name + '"]').not(this).prop('checked', false)
});

当一个复选框被选中时，正确的部分显示，但在选择另一个复选框后，部分不被隐藏，这让我相信某个地方的UI不同步，值没有正确更新。

Answer 1

使用jQuery设置复选框的值可能不会触发导致Knockout可观察对象值更新的事件。

如果你正在使用Knockout，那么你真的不需要jQuery机制来取消选择那些其他复选框。我可以想到另外两种方法来达到这个目的。

1. 最简单的解决方案是使用单选按钮。这就是单选按钮的意义所在——提供一个只能被选中的选项。
2. 为每个可观察对象添加一个.subscribe(function(val) { ... })方法，并使用此方法将其他可观察对象设置为false。

第二个想法看起来像…

var self = this;
self.ElectronicMandate = ko.observable();
self.ElectronicMandate.subscribe(function(val) {
deselectOthers(val, self.NoMandate, self.UploadMandate);
});
self.NoMandate = ko.observable();
self.NoMandate.subscribe(function(val) {
deselectOthers(val, self.ElectronicMandate, self.UploadMandate);
});
self.UploadMandate = ko.observable();
self.UploadMandate.subscribe(function(val) {
deselectOthers(val, self.ElectronicMandate, self.NoMandate);
});
var deselectOthers = function(wasSelected) {
if (!wasSelected) {
// We're only interested if someone selected a checkbox.
return;
}
// Loop through each of the non-wasSelected arguments.
// - These are the observables which we wish to set to false.
for (var i = 1; i < arguments.length; i++) {
arguments[i](false); // This is where the other observable is deselected.
}
};

这里介绍.subscribe法。