javascript 启用/禁用输入 - 淘汰赛
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29562088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable/Disable input - knockout
提问by cactodevcie
I would like to make my form editable after I'll click button.
我想让我的表单在单击按钮后可编辑。
I write code for a button click but I don't how to change state of the inputs in a form.
我为按钮单击编写代码，但我不知道如何更改表单中输入的状态。
viewModel.test= function () {
//code here
}
<input type="text"/> // Enable/Disable this
Can I disable/enable all inputs in the form or I just need to do it one by one?
我可以禁用/启用表单中的所有输入还是我只需要一一执行？
回答by Richard Macarthy
With pure knockout you can do this, basically toggling the isDisabledobservable which updates the disabledattribute on the bound element. You can use knockout attrbinding to set attributes on elements.
使用纯粹的淘汰赛，您可以做到这一点，基本上是切换isDisabled可更新disabled绑定元素上的属性的observable 。您可以使用淘汰赛attr绑定来设置元素的属性。
var ViewModel = function() {
var self = this;
self.isDisabled = ko.observable(false);
this.disable = function(){
self.isDisabled(true);
}
this.enable = function(){
self.isDisabled(false);
}
};
ko.applyBindings(new ViewModel());
<div>
<input type="text" data-bind="attr : {'disabled' : isDisabled}"/> // Sets disabled attribute if isDisabled is true.
<input type="text" data-bind="attr : {'disabled' : isDisabled}"/>
<button data-bind="click : disable">Disable</button>
<button data-bind="click : enable">Enable</button>
</div>
回答by wahwahwah
I'm not sure how well this is supported in IE8 and under but, you can use knockout to enable / disable form inputs:
我不确定这在 IE8 及更低版本中的支持情况如何，但是，您可以使用淘汰赛来启用/禁用表单输入：
function vm() {
var self = this;
self.hasForm = ko.observable(false);
self.cellphoneNumber = "";
self.personName = ""
}
ko.applyBindings(new vm());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<input type='checkbox' data-bind="checked: hasForm" />I have a cellphone & a name
</p>
<p>
<form id="form">
<label>Your cellphone number:</label>
<input type='text' data-bind="value: cellphoneNumber, enable: hasForm" />
<label>Your Name:</label>
<input type='text' data-bind="value: personName, enable: hasForm" />
</form>
</p>...Based on the ko documentation on "enable."
