Question

我在尝试实现选定/未选中的单选按钮时遇到问题。我的单选按钮是从数据库源动态创建的。

<tbody data-bind="foreach: attByGroups"

    <-- ko foreach: attributes -->
    <input type="radio" onclick="checkStrenghRadios(this)" data-bind="checked: chkValue, value: 1, attr: { name: 'group' + iAttributeID }"/> 
    <input type="radio" onclick="checkDevRadios(this)" data-bind="checked: chkValue, value: 2, attr: { name: 'group' + iAttributeID }"/>
    <-- /ko -->

</tbody

这个输入无线电在一个淘汰的foreach循环中，所以它通常创建2列30个单选按钮，每组有2个无线电。

foreach循环（attByGroups）源是从计算出的挖掘数组创建的，因此当尝试使用解决方案从（Deselecting radio buttons while keeping the View Model in synch）中选择/取消选择单选按钮时，将调用select / unselect函数两次，因此，单选按钮永远不会被检查，因为它在每次点击时都会被检查和取消选中。我能够通过另一个JavaScript函数来选择/取消选择单选按钮，但是一旦取消选中该单选按钮，单选按钮的viewModel就不会更新。

我的计算函数：

self.attByGroups = ko.computed(function () {
    var result = [], attGroupId, currentGroup, chkValue;

    ko.utils.arrayForEach(self.AttributeList(), function (attObj) {

        chkValue = attObj.iAttributeTypeId;

        if (attObj.iAttributeTypeId == 2)
            ListOfOrigDevRadios.push(attObj.iAttributeID);

        if (attObj.strAttributeGroupID !== attGroupId) {
            attGroupId = attObj.strAttributeGroupID;

            currentGroup = {
                groupHeader: attObj.strAttributeGroup,
                //checkValue: chkValue,
                attributes: []
            }

            result.push(currentGroup);
        }

       attObj.chkValue = ko.observable(chkValue);
       currentGroup.attributes.push(attObj);
    })
    self.ProssRadioBtns();
    return result;
});

Answer 1

通过不完全使用“已检查”绑定，您可以获得所需内容。通过绑定到只读计算变量，您可以确保控制基础变量的设置时间如下所示。

   //stop writes from checked binding
   attObj.compVal = ko.computed({
        read:function(){
            return attObj.chkValue();
        }
    });

标记

 <input type="radio" data-bind="value: 1,checked: compVal, attr: { name: 'group' + iAttributeID },click:toggle"/>

检查的绑定只能读取不分配给“chkValue”。那么下面的代码将负责确定“chkValue”并决定当取消选择单选按钮时会发生什么。

//handle updateing the viewModel on click
        attObj.toggle=function(vm,e){
            //if the value of the element is same as the value of the binding
            //change the checked value to 0 to unselect
            if($(e.srcElement).val()==attObj.chkValue())
                attObj.chkValue(0);
            else
                attObj.chkValue($(e.srcElement).val());

            return true;
        };

我创建了一个jsfiddle来演示我的解决方案https://jsfiddle.net/he80g8xg/6/，我希望这能为你的问题提供一些启示。

使用Knockout取消选择单选按钮，同时保持View Model同步

1 个答案: