如何創建至少有1個框處於活動狀態的複選框列表

Question

我有一個包含2個複選框的示例。我想確保總是有1個複選框處於活動狀態，這意味着複選框1或複選框2或兩者都可以處於活動狀態。我怎樣才能做到這一點？

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.toggleAssociation每當你取消你的東西先算多少item s的通過self.availableItems循環和計數那些其item.Selected() === true檢查。如果只有一個，那麼你不要取消選中它。

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; 
};