剔除復選框切換CSS類，並在單擊時切換選中

Question

<div data-bind="css: { highlighted: highlight }, click: toggleHighlight">
  random string
</div>
<input type="checkbox" data-bind="css: { 'checked': dimitri, 'unchecked': !dimitri() }, click: toggledimitri, checked: dimitri"> 

var ViewModel = function() {
  var self = this;
  self.dimitri = ko.observable(false);
  self.toggledimitri = function() { self.dimitri(!self.dimitri()) };
  self.highlight = ko.observable(true);   
  self.toggleHighlight = function () { self.highlight(!self.highlight()) };
}

ko.applyBindings(new ViewModel());
var vm = ko.dataFor(document.body);

我基本上想要的是切換css類{checked和unchecked}，同時也使用敲除選中的css：然后單擊：來選中和取消選中該復選框。 有什么想法我做錯了嗎？ jsfiddle

Answer 1

如評論中所建議，選中和單擊將有效地彼此抵消。 選中的綁定會自動切換，而單擊會再次手動切換。 刪除點擊可解決此問題。

<input type="checkbox" data-bind="css: { 'checked': dimitri, 'unchecked': !dimitri() }, checked: dimitri">

http://jsfiddle.net/KDypD/55/

Answer 2

您可以嘗試使用attr綁定並直接綁定到class屬性，而不是使用css綁定。 您可以使用ko.computed方法返回適當的CSS類名稱。 另外，您不需要user3297291所述的click事件。 該復選框將如下所示：

<input type="checkbox" data-bind="attr: { 'class': checkedClass }, checked: dimitri">

而ko.computed方法將如下所示：

this.checkedClass = ko.computed(function() {
  return this.dimitri() ? 'checked' : 'unchecked';
}, this);

這是更新的小提琴的鏈接，它演示了這一點：

http://jsfiddle.net/KDypD/56/