Javascript Library to Make HTML Input Elements and Select Read-Only without Disabling

serenix_readonly.js is a JavaScript (jQuery) plugin created to fix read-only attribute inconsistencies in form controls such as input, select, checkbox, and radio. Make the controls on the form – even <select> – read-only. Items made read-only remain focusable: they are not disabled.

how to make text field non editable in html, input readonly javascript, how to make input field not editable, make input readonly jquery, html input readonly vs disabled


Two functions are exported: read-only and toggle read-only.

The first argument for any of them could be either:

  • specific.
  • one item.
  • An array of items (Array or NodeList).

How to make use of it:

1. Load the serenix_readonly.js JavaScript library into the document.

<!-- jQuery Is OPTIONAL -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- serenix_readonly.js Plugin -->
<script src="/path/to/serenix_readonly.js"></script>

2. Make form fields read-only.

// basic
readonly('input, select');

// or
readonly('input, select', true);

// as a jQuery plugin
$('input, select').readonly(true);

3. Remove read-only status from form fields.

// basic
readonly('input, select', false);

// as a jQuery plugin
$('input, select').readonly(false);

4. Switch between read-only and editable states using the toggleReadonly method.

toggleReadonly('input, select'));

Create Readonly Form Fields Without Disabling, serenix_readonly.js Plugin/Github, input readonly not working, how to make text field editable in html, input readonly html

See Demo And Download

Official Website(marckol): Click Here

This superior jQuery/javascript plugin is developed by marckol. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…


How to Create a Skeleton Screen Loading In Pure CSS

Skeleton Screen CSS is a complete set of elements for a hierarchical screen consisting of pure CSS. The source includes scss and compiled thumbnail and non-thumbnail CSS…