启用/禁用输入 - 敲除答案

【问题标题】：Enable/Disable input - knockout启用/禁用输入 - 敲除
【发布时间】：2015-06-16 05:04:17
【问题描述】：

我想让我的表单在单击按钮后可编辑。

我为单击按钮编写代码，但我不知道如何更改表单中输入的状态。

viewModel.test= function () {
   //code here
}
<input type="text"/> // Enable/Disable this

我可以禁用/启用表单中的所有输入，还是只需要一一执行？

【问题讨论】：

标签： javascript html asp.net-mvc input knockout.js

【解决方案1】：

使用纯敲除你可以做到这一点，基本上是切换isDisabled observable，它会更新绑定元素上的disabled 属性。您可以使用敲除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>

https://jsfiddle.net/xggu9Lv2/2/

【讨论】：

是的，我知道我可以通过 jQuery 做到这一点，但我更愿意使用 Knockout
上述方法可行，但实际上没有必要使用attr 数据绑定，因为敲除提供了disable 和enable 数据绑定，如@Wahwahwah 的回答所示。

【解决方案2】：

我不确定 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>

...基于ko documentation on "enable."

【讨论】：