How can I use jQuery to make an input readonly

Question

I have the following input      lt input id  fieldName  name  fieldName  type  text  class  text box  value  Firstname   gt    How can I use jQuery to make this element a read-only input without changing the element or its value

User · Answer

Given -   lt input name  foo  type  text  value  foo  readonly   gt    this works -  jquery 1 7 1      input name  foo     prop  readonly   true     tested with readonly and readOnly - both worked

User · Answer

Maybe use atribute disabled    lt input disabled  disabled  id  fieldName  name  fieldName  type  text  class  text box    gt    Or just use label tag       lt label gt

User · Answer

In html       raisepay id   attr  readonly   true        raisepay id   prop  readonly  true     in bootstrap       raisepay id   attr  disabled   true        raisepay id   prop  disabled  true     JQuery is a changing library and sometimes they make regular improvements   attr   is used to get attributes from the HTML tags  and while it is perfectly functional  prop   was added later to be more semantic and it works better with value-less attributes like  checked  and  selected    It is advised that if you are using a later version of JQuery you should use  prop   whenever possible

User · Answer

lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head  gt       lt title gt  lt  title gt        lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt    lt  head gt   lt body gt       lt div gt           lt input id  fieldName  name  fieldName  type  text  class  text box  value  Firstname    gt       lt  div gt   lt  body gt    lt script type  text javascript  gt        function                     fieldName   attr  disabled    disabled              lt  script gt   lt  html gt

User · Answer

You can do this by simply marking it disabled or enabled   You can use this code to do this     for disable     fieldName   prop  disabled   true      for enable      fieldName   prop  disabled   false     or       fieldName   prop  readonly   true        fieldName   prop  readonly   false    --- Its better to use prop instead of attr

User · Answer

Use this example to make text box ReadOnly or  Not    lt input type  textbox  class  txt  id  txt   gt   lt input type  button  class  Btn readOnly  value  Readonly    gt   lt input type  button  class  Btn notreadOnly  value  Not Readonly    gt    lt script gt         document  ready function              Btn readOnly   click function                   txt   prop  readonly   true                         Btn notreadOnly   click function                   txt   prop  readonly   false                        lt  script gt

User · Answer

There are two attributes  namely readonly and disabled  that can make a semi-read-only input  But there is a tiny difference between them    lt input type  text  readonly   gt   lt input type  text  disabled   gt     The readonly attribute makes your input text disabled  and users are not able to change it anymore  Not only will the disabled attribute make your input-text disabled unchangeable  but also cannot it be submitted    jQuery approach  1        inputID   prop  readonly   true       inputID   prop  disabled   true     jQuery approach  2        inputID   attr  readonly   readonly        inputID   attr  disabled    disabled      JavaScript approach   document getElementById  inputID   readOnly   true  document getElementById  inputID   disabled   true    PS prop introduced with jQuery 1 6

User · Answer

Perhaps it s meaningful to also add that       fieldName   prop  readonly  false     can be used as a toggle option

User · Answer

In JQuery 1 12 1  my application uses code        raisepay id    0  readOnly true        raisepay id    0  readOnly false   and it works

User · Answer

To make an input readonly use        fieldName   attr  readonly   readonly      to make it read write use       fieldName   removeAttr  readonly      adding the disabled attribute won t send the value with post

User · Answer

simply add the following attribute     for disabled i e  cannot highlight value or change disabled  disabled      for readonly i e  can highlight value but not change readonly  readonly    jQuery to make the change to the element  substitute disabled for readonly in the following for setting readonly attribute        fieldName   attr  disabled   disabled      or       fieldName   attr  disabled   true     NOTE  As of jQuery 1 6  it is recommended to use  prop   instead of  attr    The above code will work exactly the same except substitute  attr   for  prop

User · Answer

These days with jQuery 1 6 1 or above it is recommended that  prop   be used when setting boolean attributes properties       fieldName   prop  readonly   true

User · Answer

The setReadOnly state  is very useful for forms  we can set any field to setReadOnly state  directly or from various condition But I prefer to use readOnly for setting opacity to the selector otherwise the attr  disabled  also worked like the same way   readOnly examples      input   setReadOnly true     or through the various codition like  var same   this checked     input   setReadOnly same     here we are using the state boolean value to set and remove readonly attribute from the input depending on a checkbox click

[jquery] How can I use jQuery to make an input readonly?

Examples related to jquery