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?
This question is related to
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.
<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>
Perhaps it's meaningful to also add that
$('#fieldName').prop('readonly',false);
can be used as a toggle option..
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.
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);
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.
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.
Maybe use atribute disabled:
<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />
Or just use label tag: ;)
<label>
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 />
readonly attribute makes your input text disabled, and users are not able to change it anymore.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.
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>
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().
In JQuery 1.12.1, my application uses code:
$('"#raisepay_id"')[0].readOnly=true;
$('"#raisepay_id"')[0].readOnly=false;
and it works.
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.
Source: Stackoverflow.com