JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<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
var viewModel = function() {
var self = this;
this.options = ko.observableArray(),
this.buttonEnabled = ko.computed(function() {
return self.options().length > 0;
});
};
ko.applyBindings(new viewModel());