Comparison of form element attributes readonly and disabled

Time:2020-11-20

1) Scope of application:
readonly:input[type=”text”],input[type=”password”],input[type=”teaxtarea”]
Disabled: all form elements, such as select, radio, check box, button, etc

2) Operation:
Readonly: the user is not allowed to modify the operation and does not affect any other operation
Disabled: prevent users from doing everything, including clicking events and getting focus events

3) Form submission:
Readonly: the values of form elements can be submitted to the server.
Disabled: the value of the form element is not submitted to the server, that is, the server cannot get the value in this form element

Common applications:

a> A unique identification code is pre filled for the user in a form, which is not allowed to be changed by the user. However, the value needs to be passed when submitting, and its properties should be set at this time

Readonly;

b> To prevent the form from submitting repeatedly, use JavaScript to disable the submit button (form button) after submitting the form.

c> Set read only in checkbox and radio: disable default events
For example: bind (“click”, function() {return false;}) in jQuery;