How can I use jQuery to make an input readonly?
JqueryJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
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);
Solution 2 - Jquery
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().
Solution 3 - Jquery
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.
Solution 4 - Jquery
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
readonlyattribute makes your input text disabled, and users are not able to change it anymore. - Not only will the
disabledattribute 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.
Solution 5 - Jquery
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.
Solution 6 - Jquery
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>
Solution 7 - Jquery
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.
Solution 8 - Jquery
Maybe use atribute disabled:
<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />
Or just use label tag: ;)
<label>
Solution 9 - Jquery
<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>
Solution 10 - Jquery
Perhaps it's meaningful to also add that
$('#fieldName').prop('readonly',false);
can be used as a toggle option..
Solution 11 - Jquery
In JQuery 1.12.1, my application uses code:
$('"#raisepay_id"')[0].readOnly=true;
$('"#raisepay_id"')[0].readOnly=false;
and it works.
Solution 12 - Jquery
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.
Solution 13 - Jquery
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.