Javascript 如果至少有一个复选框被选中,是否有办法启用按钮?
我想看看我是否能为这段jQuery找到一个淘汰版: 到目前为止,这就是我要说的,但是所有的项目都绑定到同一个可观察对象,所以它显然不起作用 html:Javascript 如果至少有一个复选框被选中,是否有办法启用按钮?,javascript,jquery,knockout.js,Javascript,Jquery,Knockout.js,我想看看我是否能为这段jQuery找到一个淘汰版: 到目前为止,这就是我要说的,但是所有的项目都绑定到同一个可观察对象,所以它显然不起作用 html: <form> <div> <input type="checkbox" name="option-1" id="option-1" data-bind="checked: buttonEnabled"> <label for="option-1">Option 1</label>
<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>
var viewModel = {
buttonEnabled: ko.observable(true)
};
ko.applyBindings(viewModel);
是的。请参见此处更新的JSFIDLE: 我做了几件事
值属性
options
的视图模型上的一个新属性,该属性是一个observableArrayoptions
属性的长度大于零,我将buttonEnabled
更改为返回true
的计算属性var viewModel = function() {
var self = this;
this.options = ko.observableArray(),
this.buttonEnabled = ko.computed(function() {
return self.options().length > 0;
});
};
ko.applyBindings(new viewModel());
以下是更新后的视图:
<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>
选择1
选择2
选择3
选择4
备选案文5
太好了,谢谢。我在想,这可能与一个计算的可观测的物体有关。