Knockout - "enable" tests
HTML
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<span>check to enable</span>
<input type="checkbox" data-bind="checked: allowEditing"/>
<br/>
<input type="text" data-bind="enable: allowEditing" style="width: 100px" value="Input[type=text]"/>
<br/>
<button>Button that is always enabled</button>
<br/>
<button data-bind="visible:allowEditing">Button Button</button>
<br/>
<button data-bind="{enable: allowEditing}">Button Button with squigglies</button>
<br/>
<input type="submit" value="Submit Button" data-bind="{enable: allowEditing}" />
CSS
button {
background-color:#ededed;
color:black;
}
/* comment out this style, and it appears enabling is not working. */
/* but its just bad css :-) */
button:disabled{
background-color:#lightgray;
color:gray;
}
JavaScript
$(function() {
var viewModel = {
allowEditing: ko.observable(false)
};
ko.applyBindings(viewModel);
});