readonly atribute binding

[derek johnston]

Hi,

I have a text box that I want to make readonly depending on a boolean
in the view model which is set via checkbox

On Hold: <input type="checkbox" id="onhold_${AssetId}" data-
bind="checked: IsOnHold" />
<textarea data-bind="value: Post, attr: {readonly: CanEdit ?
'readonly': ''}" rows="2" maxlength="${MaxValue}" cols="10" id="text_
${AssetId}" />


here is my constructor

function Item(post, isOnHold, time,assetId,icon, maxValue) {
this.Post = ko.observable(post);
this.Time = ko.observable(time);
this.AssetId = ko.observable(assetId);
this.Icon = ko.observable(icon);
this.IsOnHold = ko.observable(isOnHold);
this.MaxValue = ko.observable(maxValue);
this.CanEdit = ko.dependentObservable(function() {
return !this.IsOnHold();
}, this);
}

has any one got this type of attribute binging to work

regards

Derek

[rpn]

Hello-

Browsers want to support elements that just readonly on them, so you would need a binding that adds/removes the attribute.

Here is something basic that works in IE, Chrome, and FF:

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

Sample here: http://jsfiddle.net/rniemeyer/7Jynf/

[rpn]

Something didn't sit right with me on this one, so I looked at it again.  As long as you set the attribute to true or false, it should work properly.

Here is a sample: http://jsfiddle.net/rniemeyer/7Jynf/1/

In my case, locked is a boolean, so just: 

<textarea readOnly="true" data-bind="value: text, attr: { readOnly: locked() }"  rows="5"  cols="20"></textarea> 

[rpn]

The attr binding does unwrap the value for each attribute, so it could be written just like: 

<textarea readOnly="true" data-bind="value: text, attr: { readOnly: locked }"  rows="5"  cols="20"></textarea> 

[homer....@gmail.com]

Looks like it has to be readOnly="readonly" to work in IE8.