淘汰賽檢查綁定 - 只有一個檢查

我有一個管理員與一個複選框的列表。我希望能夠只選擇一個管理員。淘汰賽檢查綁定 - 只有一個檢查

HTML：

<tbody data-bind="foreach: people"> 
<tr> 
<td> 
    <input type="checkbox" data-bind="attr: { value: id }, checked: $root.selectedAdmin"> 
    <span data-bind="text: name"/> 
</td> 
</tr> 
</tbody

JS：

function Admin(id, name) { 
    this.id = id; 
    this.name = name; 
} 

var listOfAdmin = [ 
new Admin(10, 'Wendy'), 
new Admin(20, 'Rishi'), 
new Admin(30, 'Christian')]; 

var viewModel = { 
    people: ko.observableArray(listOfAdmin), 
    selectedAdmin: ko.observableArray() 
}; 

ko.applyBindings(viewModel);

例如，如果管理員ID 10被選擇的其他管理員應當取消選擇。

這可能與Knockout有關嗎？

來源

2014-01-20 devgen

如果您只想選擇一個項目，爲什麼不使用單選按鈕而不使用複選框？ – nemesv

我嘗試使用單選按鈕，但我不知道如何只能檢查行列表中的一個 – devgen

如果您只想允許多項選擇，您應該真的使用單選按鈕。

不過，如果你仍然想使用複選框，然後在解決方案是結合checked和click結合：

使用checked檢查，只有當電流id等於selectedAdmin財產和使用click結合設置爲selectedAdmin。

所以，你應該HTML是這樣的：

<input type="checkbox" data-bind="attr: { value: id }, 
            checked: $root.selectedAdmin() == id, 
            click: $parent.select.bind($parent)" />

並在您的視圖模型，你只需要實現select功能：

var viewModel = { 
    people: ko.observableArray(listOfAdmin), 
    selectedAdmin: ko.observableArray(), 
    select: function(data) { 
     this.selectedAdmin(data.id); 
     return true; 
    } 
};

演示JSFiddle。

注：

的return true;在select函數的末尾。在這種情況下，這需要觸發瀏覽器的默認行爲來檢查複選框。
的.bind($parent)需要設置this在select函數爲「父」 viewModel對象。

來源

2014-01-20 20:07:08 nemesv

淘汰賽檢查綁定 - 只有一個檢查

回答

相關問題