CODEWITHSUNDEEP
jquery
useranon
useranon

Reputation: 29514

How can I use jQuery to make an input readonly?

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?

Upvotes: 178

Views: 437300

Answers (13)

Elyas &#39;Eloy&#39; Hadizadeh Tasbiti
Elyas &#39;Eloy&#39; Hadizadeh Tasbiti

Reputation: 3675

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.

Upvotes: 14

NAVNEET CHANDAN
NAVNEET CHANDAN

Reputation: 299

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.

Upvotes: 0

pixellab
pixellab

Reputation: 608

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.

Upvotes: 10

Gopakumar
Gopakumar

Reputation: 217

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>

Upvotes: 3

Gourneau
Gourneau

Reputation: 12878

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

Upvotes: 307

P.K.
P.K.

Reputation: 1772

In JQuery 1.12.1, my application uses code:

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

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

and it works.

Upvotes: -2

Josh Pule
Josh Pule

Reputation: 11

Perhaps it's meaningful to also add that 

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

can be used as a toggle option..

Upvotes: -1

pixellabme
pixellabme

Reputation: 555

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.

Upvotes: -2

Raja Ram T
Raja Ram T

Reputation: 864

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.

Upvotes: -3

Russ Cam
Russ Cam

Reputation: 125538

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

Upvotes: 102

Reem
Reem

Reputation: 1439

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.

Upvotes: 83

Raghav
Raghav

Reputation: 9628

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

Upvotes: -1

AbstractProblemFactory
AbstractProblemFactory

Reputation: 9811

Maybe use atribute disabled:

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

Or just use label tag: ;)

<label>

Upvotes: -2

Related Questions