如何使文本禁用或不可見在淘汰賽

Question

我在頁面上有一條消息，指示用戶至少選擇五個項目。一旦用戶選擇了五個項目，我希望消息消失。

<span class="message" data-bind="text: messageToChooseAtLeastFiveItems, disable: hasSelectedFiveItems"></span> 

裏面的視圖模型我已初步將值設置爲false，當用戶選擇五個項目的值更改爲true。

self.hasSelectedFiveItems = ko.observable(false); 

gridUnredeemed.onSelectedRowsChanged.subscribe(function (e) { 
    var hasFiveRecalc = gridUnredeemed.getSelectedRows().length >= 5; 

    self.hasSelectedFiveItems(hasFiveRecalc); 
}); 

爲什麼span內的文本仍然出現？

的jsfiddle

http://jsfiddle.net/jkittell/x5xjncyp/

Answer 1

你應該做這樣的

查看：

<select multiple="true" data-bind="options:array,selectedOptions:selected"></select> 
<span class="message" data-bind="text: messageToChooseAtLeastFiveItems, visible: hasSelectedFiveItems"></span> 
<button data-bind="click: chooseFive">Choose Five Now</button> 
<button data-bind="click: chooseLessThanFive">Choose Less Than Five</button> 

視圖模型：

function ViewModel() { 
    var self=this; 
    self.array=ko.observableArray([1,2,3,4,5,6,7]); 
    self.selected=ko.observableArray(); 
    self.messageToChooseAtLeastFiveItems = "Choose Five Foo"; 
    self.hasSelectedFiveItems = ko.observable(true); 
    self.chooseFive = function() { 
     self.hasSelectedFiveItems(false); 
    } 
    self.chooseLessThanFive = function() { 
     self.hasSelectedFiveItems(true); 
    } 
    self.selected.subscribe(function(data){ 
     console.log(data.length); 
     if(data.length >=5) { self.hasSelectedFiveItems(false);} 
     else 
     { self.hasSelectedFiveItems(true);} 
    }); 

} 

ko.applyBindings(new ViewModel()); 

與下拉工作樣本和按鈕here

樣品here只使用按鈕按你撥弄

使用如下公式計算（如毫米mendtioned），我們可以做這樣的檢查here最適合此particulara情況。