javascript - 如果至少有一个 knockout 复选框被选中，是否有一种启用按钮的方法？

我正在尝试查看是否可以找到与此jQuery相当的 knockout :

http://jsfiddle.net/chriscoyier/BPhZe/76/

这是我必须要做的，但是所有项目都绑定(bind)到相同的可观察对象，因此显然不起作用。

html:

<form>
<div>
    <input type="checkbox" name="option-1" id="option-1" data-bind="checked: buttonEnabled"> <label for="option-1">Option 1</label>
</div>
<div>
    <input type="checkbox" name="option-2" id="option-2" data-bind="checked: buttonEnabled"> <label for="option-2">Option 2</label>
</div>
<div>
    <input type="checkbox" name="option-3" id="option-3" data-bind="checked: buttonEnabled"> <label for="option-3">Option 3</label>
</div>
<div>
    <input type="checkbox" name="option-4" id="option-4" data-bind="checked: buttonEnabled"> <label for="option-4">Option 4</label>
</div>
<div>
    <input type="checkbox" name="option-5" id="option-5" data-bind="checked: buttonEnabled"> <label for="option-5">Option 5</label>
</div>

<div>
    <input type="button" value="Do thing" data-bind="enable: buttonEnabled">
</div>
</form>

JavaScript:

var viewModel = {
    buttonEnabled: ko.observable(true)
};

ko.applyBindings(viewModel);

http://jsfiddle.net/dludlow/WdWEW/

最佳答案

是。在此处查看更新的jsFiddle:http://jsfiddle.net/WdWEW/4/

我做了几件事。

我向每个复选框

添加了唯一的value属性

我将复选框绑定(bind)到名为options的 View 模型上的新属性，该属性是一个observableArray

我将buttonEnabled更改为计算属性，如果true属性的长度大于零，则返回options。

这是更新的 View 模型。

var viewModel = function() {
    var self = this;
    this.options = ko.observableArray(),
    this.buttonEnabled = ko.computed(function() {
       return self.options().length > 0;
    });
};

ko.applyBindings(new viewModel());

这是更新的 View :

<form>
    <div>
        <input type="checkbox" name="option-1" id="option-1" value="1" data-bind="checked: options"> <label for="option-1">Option 1</label>
    </div>
    <div>
        <input type="checkbox" name="option-2" id="option-2" value="2" data-bind="checked: options"> <label for="option-2">Option 2</label>
    </div>
    <div>
        <input type="checkbox" name="option-3" id="option-3" value="3" data-bind="checked: options"> <label for="option-3">Option 3</label>
    </div>
    <div>
        <input type="checkbox" name="option-4" id="option-4" value="4" data-bind="checked: options"> <label for="option-4">Option 4</label>
    </div>
    <div>
        <input type="checkbox" name="option-5" id="option-5" value="5" data-bind="checked: options"> <label for="option-5">Option 5</label>
    </div>

    <div>
        <input type="button" value="Do thing" data-bind="enable: buttonEnabled">
    </div>
</form>​

关于javascript - 如果至少有一个 knockout 复选框被选中，是否有一种启用按钮的方法？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13201514/