Question

我有一个动态填充对象数组的复选框，但我现在需要将其转换为单选按钮，现在允许用户选择是或否（而不是一个复选框）

<!--
From (checkboxes):
   [] Customer 1
   [] Customer 2

To (radio button Yes/No options):

  Customer 1 (customer code)
  [] Yes
  [] No
-->

我的工作复选框和尝试（尚未成功）将它们转换为单选按钮 - fiddle

根据小提琴，最终我需要回复所选客户的数组{cusotmerType，checkedvalue}

任何建议都值得赞赏，以帮助我找到正确的方向。非常感谢

＆＃13;

function Customer(type,checked)
{
  var self = this;
  
  self.CustomerType = ko.observable(type); 
  self.IsChecked = ko.observable(checked || false);
}

function VM()
{
  var self = this;
  
  //dynamically populated - this is for testing puposes
  self.AllCustomers = ko.observableArray([
    { 
      code: "001",
      name:'Customer 1'
    },
    { 
      code: "002",
      name:'Customer 2'
    },
    { 
      code: "003",
      name:'Customer 3'
    },
  ]);
  
 self.selectedCustomers = ko.observableArray([]);
 self.Customer = ko.observableArray([]); //I need to POST this back- all selected customers
  
//return all customers that checked the box
self.selectedCustomers.subscribe(function() {
self.Customer.removeAll();
  ko.utils.arrayForEach(self.selectedCustomers(), function(item) {
      self.Customer.push(new Customer(item, true));
  });
});

}
ko.applyBindings(new VM());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- ko foreach: AllCustomers -->
  <input type="checkbox" data-bind="value: $data.code, checked:$parent.selectedCustomers" /> 
   
  <span data-bind="text: $data.name"></span>
  <!-- /ko -->
  
  <h4>Selected customers</h4> 
  <div data-bind="foreach: Customer">
    <span data-bind="text: CustomerType"></span>
    <span data-bind="text: IsChecked"></span>
    <span>,</span>
  </div> 
  <br>
  <!-- I need to convert them into radio options 
  eg:
  Customer 1 (can be customer code)
  [] Yes
  [] No
  -->
  <strong>
  Not working yet..only one of the Yes/No can be selected among all cusotmers
  </strong><br><br>
   <!-- ko foreach: AllCustomers -->
   <span data-bind="text: $data.name"></span><br>
   <input type="radio" data-bind="value: $data.code,checked:$parent.selectedCustomers" />Yes
   <input type="radio" value="No" data-bind="checked:$parent.selectedCustomers" />No
   <br>
  <!-- /ko -->

＆＃13;

Answer 1

您的代码存在很多问题，最重要的是：

radiobuttons可以在name属性
knockout与无线电按钮和复选框上的observableArray（在您的情况下为selectedCustomers）的效果并不相同。

我已更新你的小提琴https://jsfiddle.net/w75px6r2/7/ 我真的不知道我能改变什么，不知道什么不改变。所以我把输入和输出数组保持不变。我只改变了那些之间的数据处理。基于此，您需要的是找出最佳解决方案。

在第一部分中，我只添加了另一个为视图准备的数组，它只是使用isSelected可观察的扩展原始项目。

然后我只是在视图中绑定它。您现在应该看到复选框和单选按钮应该在同一视图中工作。

function Customer(type, name, checked) {
  var self = this;

  self.CustomerType = ko.observable(type);
  self.Name = ko.observable(name);
  self.IsChecked = ko.observable(checked || false);
}

function VM() {
  var self = this;

  //dynamically populated - this is for testing purpose
  self.AllCustomers = ko.observableArray([{
      code: "001",
      name: 'Customer 1'
    },
    {
      code: "002",
      name: 'Customer 2'
    },
    {
      code: "003",
      name: 'Customer 3'
    },
  ]);

  self.AllCustomersViewModel = ko.observableArray(
    self.AllCustomers().map(function(value) {
      value.isSelected = ko.observable(false);
      return value;
    }));

  self.selectedCustomers = ko.pureComputed(function() {
    var result = [];
    ko.utils.arrayForEach(self.AllCustomersViewModel(), function(item) {
      if (item.isSelected()) {
        result.push(item);
      }
    });
    return result;
  });
  self.Customer = ko.observableArray([]); //I need to POST this back- all selected customers

  //return all customers that checked the box
  self.selectedCustomers.subscribe(function() {
    self.Customer.removeAll();
    ko.utils.arrayForEach(self.selectedCustomers(), function(item) {
      self.Customer.push(new Customer(item.code, item.name, true));
    });
  });

}
ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko foreach: AllCustomersViewModel -->
<input type="checkbox" data-bind="checked: isSelected" />

<span data-bind="text: name"></span>
<!-- /ko -->

<h4>Selected customers</h4>
<div data-bind="foreach: Customer">
  <span data-bind="text: CustomerType"></span>
  <span data-bind="text: IsChecked"></span>
  <span>,</span>
</div>
<br>

<!-- I need to convert them into radio options 
  eg:
  Customer 1
  [] Yes
  [] No
  -->
<strong>
  Not working yet..only one of the Yes/No can be selected among all customers
  </strong><br><br>
<!-- ko foreach: AllCustomersViewModel -->
<span data-bind="text: name"></span><br>
<input type="radio" data-bind="value: true, checked: isSelected, attr: {name: $index}" />Yes
<input type="radio" data-bind="value: false, checked: isSelected, attr: {name: $index}" />No
<br>
<!-- /ko -->

淘汰赛 - 如何将动态填充的复选框转换为单选按钮（是/否）？

1 个答案: