Enable/Disable input - knockout

Question

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?

Answer 1

With pure knockout you can do this, basically toggling the isDisabled observable which updates the disabled attribute on the bound element. You can use knockout attr binding to set attributes on elements.

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/