Read Only - Show as Text

Sets the elements contained with a container to read-only and shows their values as text. This disabler excludes disabling labels by adding the value, *:not(label) to the expression option. By default, the disabler plugin already adds :not(.disabler-ignore-readonly) to the selector to not select elements set to be ignored. If you override the selector, be sure to include the default selector. Doing so helps performance. For example the selector expression, *:not(.disabler-ignore-readonly):not(label), tells the disabler plugin to examine all elements except those that have the CSS class "disabler-ignore-readonly" associated to it and all Label elements.

To indicate that you want an element to display its value as text when set to read-only, add the class disabler-show-text-readonly to the element. To specify a specific value to be displayed when the disabler-show-text-readonly is set, add the data attribute data-disabler-read-only-display on the element with desired display value. For example, the SELECT boxes, radio buttons, and check boxes on this page have the data-disabler-read-only-display attribute associated with them to indicate the text to display instead of using the actual value of the control.

This demo assigns the disabler-hide-readonly class to some controls to indicate that you want the disabler to hide the control when set to read-only.

Click the "Set Read Only" button to see it in action. View the source of this page to see the code.