使用jQuery-knockout.js操作DOM后,模型和用户界面不同步

eaf3rand  于 2022-11-10  发布在  jQuery
关注(0)|答案(1)|浏览(161)

我有以下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在某个地方不同步,值没有正确更新。

w8f9ii69

w8f9ii691#

可能的情况是,使用jQuery设置复选框的值不会触发导致Knockout可观察值更新的事件。
如果您使用Knockout,那么您真的不需要jQuery机制来取消选中其他复选框。
1.最简单的解决方案是使用单选按钮,这就是单选按钮的意义所在--提供一个只能选择一个选项的选项。
1.为每个可观测量添加一个.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方法。

相关问题