So I’m generating a textarea element using MVC3. I generate my element with the following mark-up:
<%=Html.TextAreaFor(model=> model.Description, new { value=Model.Description, @class="readonlyDescription", placeholder = "No " + Model.DescriptionLabel.ToLower() + " provided", @readonly = "readonly", rows = 1, cols = 30}) %>
When generated under Google Chrome I see:
<textarea class="readonlyDescription" cols="30" id="Description" name="Description" placeholder="No description provided" readonly="readonly" rows="1" value=""></textarea>
When generated under IE9 I see:
<textarea name="Description" class="readonlyDescription" id="Description" rows="1" cols="30" readOnly="readonly" value="" placeholder="No description provided">
When generated under IE8 I see:
<textarea name="Description" class="readonlyDescription placeholder" id="Description" rows="1" cols="30" readOnly="" value="" placeholder="No description provided" jQuery172027049094255782585="250">
Note that my readonly attribute has gone missing. Where did it go?
I’ve also tried using @readonly = “true” but did not see any differing effects.
EDIT: I suspect it IS coming across, but IE8 is just treating the existance of ‘readonly’ as enough for it to be enabled. Then, it handles readonly differently than IE9. So, I’m using disabled instead of readonly with the additional CSS of making the background transparent (as to look readonly and not disabled)
readonly only has one value, and that is readonly, so it is valid for the presence of the readonly attribute to be enough to render it readonly.
same for disabled, simply the presence of the attribute is enough
In JS, to enable or make a control editable, you remove those attributes rather than set them to true or false.
W3Schools has some to say on it