剔除单选按钮检查状态未在 UI 中更新答案

【问题标题】：knockout radio button checked status not updated in UI剔除单选按钮检查状态未在 UI 中更新
【发布时间】：2019-06-08 09:07:15
【问题描述】：

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

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

ID下面是整个Dropdown 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。

请指导

谢谢

施鲁提奈尔

【问题讨论】：

标签： javascript knockout.js radio-button

【解决方案1】：

使用“更改”事件而不是“点击”。单选和复选框有更改触发器。

    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>

【讨论】：

【解决方案2】：

在方法中添加了 return true 并且它起作用了。

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

   }

【讨论】：