Read-Only Fields - Displaying as Disabled - CSS

To style read-only fields to look like they're disabled, use the following CSS.

{copytext|css}

input[readonly] {
    color: graytext;
    background: buttonface;
}

In addition, because the READONLY attribute doesn't apply to SELECT elements, they can be "locked" via some jQuery in their ONCHANGE attribute, as follows.

<select onchange='$(this).val(original-value);'>
    <option . . . />
</select>

In Razor syntax, it might look like the following.

@Html.DropDownListFor(
    m => m.OrderTypeId, 
    new SelectList(Model.OrderTypes, "Id", "DisplayName"),
    new { @readonly="readonly", OnChange = "$(this).val(" + @Model.OrderTypeId + ");" }
    )