我想看看我是否能找到这个 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);
最佳答案
是的。在此处查看更新的 jsFiddle:http://jsfiddle.net/WdWEW/4/
我做了一些事情。
- 我为每个复选框添加了一个独特的
value
属性 - 我将复选框绑定(bind)到名为
options
的 View 模型上的一个新属性,它是一个 observableArray - 我将
buttonEnabled
更改为一个计算属性,如果options
属性的长度大于零,它会返回true
。
这是更新后的 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 - 如果至少选中了一个复选框,是否有一种方法可以启用按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13201514/