我有以下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>
我还有3个部分,根据选中的复选框显示或隐藏:
<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在某个地方不同步,值没有正确更新。
1条答案
按热度按时间w8f9ii691#
可能的情况是,使用jQuery设置复选框的值不会触发导致Knockout可观察值更新的事件。
如果您使用Knockout,那么您真的不需要jQuery机制来取消选中其他复选框。
1.最简单的解决方案是使用单选按钮,这就是单选按钮的意义所在--提供一个只能选择一个选项的选项。
1.为每个可观测量添加一个
.subscribe(function(val) { ... })
方法,并使用该方法将其他可观测量设置为false
。第二个想法看起来像...
此处说明
.subscribe
方法。