更新

Question

我有一组3个引导样式checkboxes，如下所示：

<div class="btn-group" data-toggle="buttons">
     <label class="btn btn-primary btn-sm" data-bind=""><input type="checkbox">Checkbox 1</label>
     <label class="btn btn-primary btn-sm"><input type="checkbox">Checkbox 2</label>
     <label class="btn btn-primary btn-sm"><input type="checkbox">Checkbox 3</label>
</div>

在运行时如果按下第一个复选框，当我检查元素时，它会附加一个active css类：

<label class="btn btn-primary btn-sm active" >

如果我想在输入收到data-bind=""类时执行函数，我的active属性应该如何？我也希望相反的事情发生。当活动类不再存在时，还必须调用一个函数。

我无法在复选框上使用点击绑定，因为它无法正常工作，因为它的引导方式是＆＃34;滴答＆＃34;一个复选框。

谢谢（演示 - http://jsfiddle.net/H7Js6/）

Answer 1

knockout是关于拥有一个代表你的UI的视图模型。您可以click绑定而不是checked绑定，并使用subscribe函数：

<label class="btn btn-primary btn-sm" data-bind="">
    <input type="checkbox" data-bind="checked: cb1" />Checkbox 1
</label>

在js：

var viewmodel = function () {
    this.cb1 = ko.observable();
    this.cb1.subscribe(function (newValue) {
        //your code here gets called every time the checked status changes
        // use newValue to know the new state
    });
}

Demo

更新

谢谢你的小提琴，总是有帮助。

实际上，在这种情况下，加载bootstrap css时不会更改checked（如果删除了资源，你会看到它有效）。

要解决此问题，您可以拥有一个自定义绑定处理程序，它将为您检查css类的存在：

ko.bindingHandlers.bootstrapCheckbox = {
    init: function (element, valueAccessor, allBindingAccessor, viewModel, 
                    bindingContext) {
        if (ko.isObservable(allBindingAccessor().value)) {
            $(element).change(function () {
                //invert it because called before the class is added/removed :(
                allBindingAccessor().value(!$(element).hasClass("active")); 
            });
        }
        allBindingAccessor().value($(element).hasClass("active")); //init value
    }
}

用法：

<label class="btn btn-primary btn-sm" 
       data-bind="bootstrapCheckbox: true, value: cb1">
    <input type="checkbox" />Checkbox 1
</label>

然后保留代码的第一部分（订阅）。

Demo

Answer 2

了解已经有一个很好的答案，并试图了解它是如何完成的，我想到使用已经存在的点击绑定，这可能是另一种选择（并不是说它更好）

var vm = function(){
    this.checkedButtons = ko.observableArray([]);    

    this.isActive =  function(item, event){
        if (!$(event.target).hasClass("active")){
            this.checkedButtons.push(event.target);
        }
        else{
            this.checkedButtons.pop();
        }
    };
};

ko.applyBindings(new vm());

用法：

<div class="btn-group" data-toggle="buttons">
     <label id="label1" class="btn btn-primary btn-sm" data-bind="click: isActive"><input id="input1" type="checkbox">Checkbox 1</label>
     <label class="btn btn-primary btn-sm" data-bind="click: isActive"><input type="checkbox">Checkbox 2</label>
     <label class="btn btn-primary btn-sm" data-bind="click: isActive"><input type="checkbox">Checkbox 3</label>
</div>
<div>How many buttons are clicked?
    <span data-bind="text: checkedButtons().length "></span>
</div>

Fiddle

Answer 3

如果您正在使用jquery，则可以在单选按钮上绑定更改事件

$(".btn-group input[type=checkbox]").on("change",function(){
//you can do whatever you want here
});

如果存在css类，则绑定元素

3 个答案:

Demo

更新

Demo