少なくとも1つのボックスがアクティブなチェックボックスのリストを作成する方法

Question

2つのチェックボックスを含む例があります。私は常に1つのチェックボックスがアクティブであることを確認したい、それはチェックボックス1またはチェックボックス2のどちらか、または両方がアクティブであることを意味する。どうやってやるの？ self.toggleAssociationで

function DemoItem(id, name) { 
 
    var self = this; 
 

 
    self.id = ko.observable(id); 
 
    self.Name = ko.observable(name); 
 
    self.Selected = ko.observable(false); 
 
} 
 

 
function ViewModel() { 
 
    var self = this; 
 

 
    self.availableItems = ko.observableArray(); 
 
    self.associatedItemIds = ko.observableArray(); 
 

 
    self.init = function() { 
 
     self.availableItems.push(new DemoItem(1, 'One')); 
 
     self.availableItems.push(new DemoItem(2, 'Two')); 
 
     
 
    }; 
 
    
 
    self.toggleAssociation = function (item) { 
 
     if (item.Selected() === true) console.log("dissociate item " + item.id()); 
 
     else console.log("associate item " + item.id()); 
 
     item.Selected(!(item.Selected())); 
 
     return true; 
 
    }; 
 
} 
 

 
var viewModel = new ViewModel(); 
 
ko.applyBindings(viewModel); 
 
viewModel.init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
Available Items: 
 
<div data-bind="foreach: $root.availableItems"> 
 
    <input type="checkbox" data-bind="value: id(), checked: $root.associatedItemIds, click: $root.toggleAssociation" /> \t 
 
    <span data-bind="text: '&nbsp;' + Name()"></span> 
 
    <br/> 
 
</div> 
 
<br/> 
 
Associated Item Ids: 
 
<div data-bind="foreach: $root.associatedItemIds"> 
 
    <span data-bind="text: $data"></span> 
 
    <br/> 
 
</div>

Answer 1

あなたが最初self.availableItemsをループしてitem.Selected() === trueいるため、それらをカウントすることによって確認されているどのように多くのitem秒数える何かをオフにするたびに。 1つしかない場合はのチェックを外してください。

self.toggleAssociation = function (item) { 
    if (item.Selected() === true) { 
     var howManyAreSelected = 0; 

     ko.utils.arrayForEach(self.availableItems(), function (item) { 
      if (item.Selected() === true) { 
       howManyAreSelected += 1; 
      } 
     }); 

     if (howManyAreSelected > 1) { 
      item.Selected(false); 
     } 
    } 
    else { 
     item.Selected(true); 
    } 
    return true; 
};