这三个按钮只有一个视图模型，也就是说只有一个“isActive”标志，所有按钮都绑定到它。
相反，使用一个项目数组和一个foreach循环来呈现每一个项目。

var viewModel = function(){
    var self = this;
    self.items = [
        { isActive: ko.observable(false) },
        { isActive: ko.observable(false) },
        { isActive: ko.observable(false) }
        ];
    self.toggleActive = function(data, event){
        data.isActive(!data.isActive());//toggle the isActive value between true/false
    }
}

var myModel = new viewModel();

ko.applyBindings(myModel);

HTML也被简化了：

<div data-bind="foreach: items">
    <button data-bind="click: $parent.toggleActive, css : {'activeStyle' : isActive}">Toggle Active</button>
</div>

注意使用$parent来访问父对象的binding context。当您在foreach循环中时，绑定上下文是从foreach循环中提取的单个项。通过访问$parent，您可以“到达”包含items属性的对象--在您的示例中，该对象是toggleActive所在的视图模型。
下面是一个更新的小提琴：http://jsfiddle.net/psteele/amMup/6/

这是因为你把它们都束缚在同一个可观察的东西上。
http://jsfiddle.net/Kohan/fdzqJ/

个J

var viewModel = function(){
    var self = this;
    self.isActive1 = ko.observable(false);
    self.isActive2 = ko.observable(false);
    self.isActive3 = ko.observable(false);

    self.toggleActive = function(data){
        data(!data());
    }
}

var myModel = new viewModel();

ko.applyBindings(myModel);

HTML格式

<button data-bind="click: function(){toggleActive(isActive1)}, css : {'activeStyle' : isActive1}">Toggle Active</button>
<button data-bind="click: function(){toggleActive(isActive2)}, css : {'activeStyle' : isActive2}">Toggle Active</button>
<button data-bind="click: function(){toggleActive(isActive3)}, css : {'activeStyle' : isActive3}">Toggle Active</button>

另一个道：

<button data-bind="click: function(){setActive('1')}, css:  buttonActive() == '1' ? 'active' : '' ">Toggle Active</button>

var viewModel = function(){
    var self = this;
    self.buttonActive = ko.observable(false);
    self.buttonActive = function(index){
        self.buttonActive(index);
    }
}

var myModel = new viewModel();

ko.applyBindings(myModel);