How can I use jQuery to make an input readonly?

Question

I have the following input:

  <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>

How can I use jQuery to make this element a read-only input without changing the element or its value?

Gourneau · Accepted Answer · 2016-06-06 17:22:32Z

307

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);

edited Jun 6, 2016 at 17:22

answered May 18, 2012 at 23:16

Gourneau

12.9k8 gold badges44 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

R. Schreurs Over a year ago

Note that readonly does not apply to all inputs. [HTML attribute: readonly](See developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly). I attempted to create a select that would allow the options to be shown, but not an other option to be selected. This cannot be done with readonly.

Stop War Over a year ago

The correct way to refer an element is to use its id and so I would rather use $("#id_fieldName").prop("readonly", true); provided the id of the field fieldName is id_fieldName.

Russ Cam · Accepted Answer · 2014-02-17 15:10:43Z

102

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().

edited Feb 17, 2014 at 15:10

answered Sep 1, 2009 at 12:19

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

3 Comments

Dave Over a year ago

disabling a field isn't the same as making it not editable, right? disabling it will make it also not submit

Russ Cam Over a year ago

@Dave correct. Also readonly inputs can be focused, disabled inputs can't

Yasser CHENIK Over a year ago

also elements with read only are submited but elements with disabled are not submited !

Reem · Accepted Answer · 2011-06-20 08:48:17Z

83

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.

answered Jun 20, 2011 at 8:48

Reem

1,4492 gold badges18 silver badges21 bronze badges

Comments

Elyas 'Eloy' Hadizadeh Tasbiti · Accepted Answer · 2020-04-29 08:38:09Z

14

There are two attributes, namely readonly and disabled, that can make a semi-read-only input. But there is a tiny difference between them.

<input type="text" readonly />
<input type="text" disabled />

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.

edited Apr 29, 2020 at 8:38

answered Apr 29, 2020 at 8:29

Elyas 'Eloy' Hadizadeh Tasbiti

3,6958 gold badges48 silver badges62 bronze badges

Comments

pixellab · Accepted Answer · 2019-08-19 17:30:04Z

10

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.

edited Aug 19, 2019 at 17:30

answered Dec 1, 2015 at 11:48

pixellab

6084 silver badges14 bronze badges

1 Comment

Nielsvh Over a year ago

Disabled inputs do not get submitted on form post/get.

Gopakumar · Accepted Answer · 2017-03-31 06:22:06Z

3

Use this example to make text box ReadOnly or Not.

<input type="textbox" class="txt" id="txt"/>
<input type="button" class="Btn_readOnly" value="Readonly" />
<input type="button" class="Btn_notreadOnly" value="Not Readonly" />

<script>

    $(document).ready(function(){
       ('.Btn_readOnly').click(function(){
           $("#txt").prop("readonly", true);
       });

       ('.Btn_notreadOnly').click(function(){
           $("#txt").prop("readonly", false);
       });
    });

</script>

answered Mar 31, 2017 at 6:22

Gopakumar

2172 silver badges8 bronze badges

Comments

NAVNEET CHANDAN · Accepted Answer · 2020-04-09 23:20:42Z

0

Given -

<input name="foo" type="text" value="foo" readonly />

this works - (jquery 1.7.1)

$('input[name="foo"]').prop('readonly', true);

tested with readonly and readOnly - both worked.

edited Apr 9, 2020 at 23:20

answered Apr 9, 2020 at 23:15

NAVNEET CHANDAN

2973 silver badges8 bronze badges

Comments

Raghav · Accepted Answer · 2009-09-01 13:36:59Z

-1

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <div>
        <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" />
    </div>
</body>

<script type="text/javascript">
    $(function()
    {
        $('#fieldName').attr('disabled', 'disabled');

    });
</script>
</html>

answered Sep 1, 2009 at 13:36

Raghav

9,7367 gold badges91 silver badges115 bronze badges

Comments

Jatin · Accepted Answer · 2015-11-24 00:12:17Z

-1

Perhaps it's meaningful to also add that

$('#fieldName').prop('readonly',false);

can be used as a toggle option..

edited Nov 24, 2015 at 0:12

Jatin

3,0876 gold badges31 silver badges42 bronze badges

answered Nov 23, 2015 at 23:21

Josh Pule

111 bronze badge

1 Comment

TMN Over a year ago

I tried this with jQuery 3.3.1 and it simply adds a readonly attribute to the element, regardless of the value passed. So your example would wind up making the input field read-only, despite ostensibly setting the value to false.

AbstractProblemFactory · Accepted Answer · 2009-09-01 13:27:55Z

-2

Maybe use atribute disabled:

<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />

Or just use label tag: ;)

<label>

edited Sep 1, 2009 at 13:27

answered Sep 1, 2009 at 12:23

AbstractProblemFactory

9,8518 gold badges54 silver badges67 bronze badges

1 Comment

Quentin Over a year ago

The question said "With jQuery" (which implies it should be done dynamically) and "read-only" (which is different to disabled).

arshad · Accepted Answer · 2015-01-23 06:49:11Z

-2

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.

edited Jan 23, 2015 at 6:49

arshad

8937 silver badges35 bronze badges

answered Sep 18, 2014 at 7:11

pixellabme

5554 silver badges4 bronze badges

1 Comment

Dave B 84 Over a year ago

the above examples don't work - setReadOnly isn't a function built into jquery or any browsers

P.K. · Accepted Answer · 2016-04-26 10:46:35Z

-2

In JQuery 1.12.1, my application uses code:

$('"#raisepay_id"')[0].readOnly=true;

$('"#raisepay_id"')[0].readOnly=false;

and it works.

answered Apr 26, 2016 at 10:46

P.K.

1,7726 gold badges28 silver badges64 bronze badges

Comments

Raja Ram T · Accepted Answer · 2014-07-02 11:36:39Z

-3

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.

answered Jul 2, 2014 at 11:36

Raja Ram T

8628 silver badges8 bronze badges

1 Comment

simontemplar Over a year ago

I voted this down because it is nonsensical. It's all HTML, JavaScript, and Bootstrap uses jQuery so that fact is not even relevant. Additionally disabled and read only are two different things which work independent of whether or not Bootstrap is used.

Collectives™ on Stack Overflow

How can I use jQuery to make an input readonly?

13 Answers 13

2 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

2 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Linked

Related