UI 中未更新淘汰单选按钮选中状态

Question

在我的淘汰赛应用程序中，我试图在 forEach 循环中处理一些无线电输入。

点击事件更新了选中的属性，但同样没有反映在单选按钮的UI中。

下面的 ID 是整个下拉列表 html :

    <ul class="dropdown-menu padding-left padding-right customscroll" data-bind="stoppropgattion:'ss'">

     <!--ko foreach:MyPlans-->
     <li>
        <div class="radio radio-adv">
        <label data-bind="attr:{for:$data.Id_$index}" for="cs_plan">
          <input class="access-hide" id="cs_plan" data-bind="value:$data.Selected,checked:$data.Selected,attr:{id:$data.Id_$index,name:true},click:UpdatedSelectedPlan" name="Plan" type="radio" />
          <span> <!--ko text:$data.Name--><!--/ko--><!--ko if:$data.IsDefault--><span> (Default)</span><!--/ko--></span><span class="circle"></span><span class="circle-check"></span>
        </label>
     </div>
   </li>
 <!--/ko-->
</ul>

点击后我也会更新所选的回复：

UpdatedSelectedPlan = function (data, event) {
            selF.MyPlans.filter(function (elem) {
                elem.Selected(false);
            });
            data.Selected(true);

        }

所选值已正确更新，但未反映在 UI 中。

当下拉列表加载正确的单选按钮时显示为选中状态，但点击单选按钮并没有改变 UI 明智的，即使选择的值已更新。

请指导

谢谢

施鲁提奈尔

Answer 1

向该方法添加 return true，它起作用了。

    UpdatedSelectedPlan = function (data, event) {
         selF.MyPlans.filter(function (elem) {
         elem.Selected(false);
    });
       data.Selected(true);
       return true;

   }

Answer 2

使用 "change" 事件而不是 "click"。单选框和复选框有更改触发器。

    function vm(){
    var self = this;
    self.MyPlans = ko.observableArray([
      {Id:1, Name:'A', Selected:ko.observable(false), IsDefault:true}, 
      {Id:2, Name:'B', Selected:ko.observable(false), IsDefault:false}, 
      {Id:3, Name:'C', Selected:ko.observable(false), IsDefault:false}, 
      {Id:4, Name:'D', Selected:ko.observable(false), IsDefault:false}, 
      {Id:5, Name:'E', Selected:ko.observable(true), IsDefault:false}, 
    ]);
      self.UpdatedSelectedPlan = function (data, event) {
            self.MyPlans().filter(function (elem) {
                elem.Selected(false);
            });
            data.Selected(true);
        }
                 
     }
     
     ko.applyBindings(new vm())

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul>
             <!--ko foreach:MyPlans-->
         <li>
            <div class="radio radio-adv">
            <label data-bind="attr:{for:$data.Id_$index}" for="cs_plan">
              <input class="access-hide" id="cs_plan" data-bind="checked:$data.Selected,value:$data.Selected,  attr:{id:$data.Id_$index,name:true},event:{change:$parent.UpdatedSelectedPlan}" name="Plan" type="radio" />
              <span> <!--ko text:$data.Name--><!--/ko--><!--ko if:$data.IsDefault--><span> (Default)</span><!--/ko--></span><span class="circle"></span><span class="circle-check"></span>
              selected ? <span data-bind="text:Selected"></span>
            </label>
         </div>
       </li>
     <!--/ko-->
    </ul>

UI 中未更新淘汰单选按钮选中状态

knockout radio button checked status not updated in UI

javascript

radio-button

knockout.js