Javascript 敲除输入只读状态

我正试图在我的程序中添加一个简单的功能，但我在想如何做我想做的事情时遇到了一点困难

我得到的是：

我的输入文本框，旁边有一个链接，用于禁用/启用该输入文本框的只读属性

<div>
    <input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="420" />
    <a href="javascript:void(0);" data-bind="click: readonly">Edit</a>
</div>

这很好，但我想要的是，当我单击编辑链接时，它会将链接的文本更改为“停止编辑”，因此当我单击“停止编辑”时，只读属性将再次启用
这是我工作的一个例子

---

任何帮助都将不胜感激，谢谢

我已经更新了您的小提琴，希望它能满足您的需要：

<div>
    <input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="420" />
    <a href="javascript:void(0);" data-bind="click: readonly"><span data-bind="text:linkText"></span></a>
</div>

var ViewModel = function() {
    var self = this;
    self.getreadonlyState = ko.observable('readonly');
    self.readonly = function() {
        if (self.getreadonlyState()) {
            self.getreadonlyState(undefined);

        }
        else { 
            self.getreadonlyState('readonly');

        }
    }
    self.linkText = ko.computed(function(){
        return self.getreadonlyState() == 'readonly' ? "Stopping edit" : "Edit";
    }, self);
}

ko.applyBindings(new ViewModel());

var ViewModel=函数（）{
var self=这个；
self.getreadonlyState=ko.observable（'readonly'）；
self.readonly=函数（）{
if（self.getreadonlyState（））{
self.getreadonlyState（未定义）；
}
否则{
self.getreadonlyState（'readonly'）；
}
}
self.linkText=ko.computed（函数（）{
返回self.getreadonlyState（）=“只读”？“正在停止编辑”：“编辑”；
}，自我）；
}
应用绑定（新的ViewModel（））；

这里有一个替代@thangcao答案的选项。我并不是说这是更好或更糟的，只是一种使用订阅处理程序而不是computedObservable的替代方法

var ViewModel=函数（）{
var self=这个；
self.getreadonlyState=ko.observable（'readonly'）；
self.getreadonlyState.subscribe（函数（val）{
self.linkText（val==“只读”？“编辑”：“停止编辑”）；
});
self.readonly=函数（）{
if（self.getreadonlyState（））{
self.getreadonlyState（未定义）；
}
else self.getreadonlyState（'readonly'）；
}
self.linkText=ko.可观察（“编辑”）；
}
应用绑定（新的ViewModel（））；

请注意，@thangcao的答案中不需要额外的

另外，为什么“编辑”/“停止编辑”元素是锚定标记？为什么不把它变成一个

，不再需要额外的内联JavaScript（您可以用

return false；

在

readonly

函数中替换它）

---

您可以使用此BinginHandler：

ko.bindingHandlers.readOnly = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            element.setAttribute("disabled", true);

        } else {
            element.removeAttribute("disabled");
        }
    }
};

在我的html中：

<input type="text" id="create-finess" class="form-control" data-bind="readOnly: _locked" />

---

您好，谢谢您的回答，但也许您可以帮助我解决在我应用此选项后出现的另一个问题。

ko.bindingHandlers.readOnly = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            element.setAttribute("disabled", true);

        } else {
            element.removeAttribute("disabled");
        }
    }
};

<input type="text" id="create-finess" class="form-control" data-bind="readOnly: _locked" />

//Constructor of my view model

  function ViewModel(resx) {
       this._locked = ko.observable();
}

  // on init of the page i lock the input
 this._load = function () {
  this._locked(true);
}