剔除复选框切换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/