Put a field as read-only with javascript or jquery

Question

I have tried to set a item to read only, as you see in the code i have tried several way and can't get that to work. Can anyone help me with this?

<html>
<script>

 //test.Attributes.Add("readonly","readonly")

 //document.getElementById('testtt').setAttribute('readonly', 'readOnly'); 

 // document.getElementByID('test').value=readOnly;

 //document.getElementByID('test').readOnly = true;

 // $("#test").attr("readonly", "readonly");

 //$("#test").removeAttr("readonly");

 //$('#test').attr('readonly', 'readonly');

 $("#test").attr("readonly")

</script>
<body>  
     <input id="test" type="text" value="text" />
</body>
</html>

This post could help you http://stackoverflow.com/questions/1306708/add-readonly-to-input-jquery/1306723#1306723 — birkof, Sep 08 '11 at 10:44

score 2 · Accepted Answer · answered Sep 08 '11 at 10:42

2

$('#test').attr('readonly', true);

working example : http://jsfiddle.net/FBUDt/

answered Sep 08 '11 at 10:42

yoda

10,834
19
64
92

score 1 · Answer 2 · answered Sep 08 '11 at 10:43

this should work for you:

 $("#test").attr("readonly", "readonly");

remember that the DOM needs to be loaded before you try to find the element

you could use jquerys DOM-ready

$(function() {
    $("#test").attr("readonly", "readonly");
});

what version of jquery are you using?

score 1 · Answer 3 · answered Sep 08 '11 at 10:43

You should try wrapping your code into $('document').ready();

According to the documentation,

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

So it would be:

$('document').ready(function(){
    $("#test").attr("readonly", "readonly");
});

score 1 · Answer 4 · answered Sep 08 '11 at 10:45

1

You can't refer to an element that is created later in the document. Move the script down below the form, or place it in a document.ready block. Also, you should use $.prop() in jQuery 1.6+

$(function(){
  $('#test').prop('readonly', true);
});

answered Sep 08 '11 at 10:45

Jens Roland

27,450
14
82
104

score 1 · Answer 5 · answered Sep 08 '11 at 10:50

1

I would go with

document.getElementById('test').setAttribute('readonly', 'readOnly');

But that is not the issue. The position of your script is where it goes wrong. You are trying to change element which does not exist.

<!DOCTYPE html>
<html>
   <head>
     <meta charset=utf-8 />
     <title>testcase</title>
     <link rel="stylesheet" href="stylesheet.css" type="text/css" />
  </head>
  <body>
    <div class="some container">
      <input id="test" type="text" value="text" />
     </div>
     <script type="text/javascript" charset="utf-8">
       document.getElementById('test').setAttribute('readonly', 'readOnly');
     </script>
  </body>
</html>

If you place your scripts right befor the closing </body> tag , then it is executes as soon as DOM has been built.

And please. Stop using JS libraries to do the most basic things.

answered Sep 08 '11 at 10:50

tereško

58,060
25
98
150

1

Since `setAttribute()` is 'monumentally broken' in IE<8 (Source: http://reference.sitepoint.com/javascript/Element/setAttribute#compatibilitysection), using jQuery for this is perfectly sound. – Jens Roland Sep 08 '11 at 10:54
@Jens Roland how th hell can you defend adding a 20KB bloat for setting single attribute? There is an issue in IE .. no problem .. check for it. Or set value to `document.getElementByID('test').readOnly` instead. But do not promote using huge JS libraries because of ignorance. – tereško Sep 08 '11 at 11:05
1

Haha.... Of course I wouldn't defend that. I assume he's using jQuery already and for a lot more, or he wouldn't tag the question 'jQuery' – Jens Roland Sep 08 '11 at 11:24
@Jens Roland always expect worst possible situation. – tereško Sep 08 '11 at 11:30
@jens that was what I and (almost) everyone probably have assumed too – bluefoot Sep 08 '11 at 17:15

score 0 · Answer 6 · answered Sep 08 '11 at 10:43

0

you are missing

$(document).ready(function() {
  $('#test').attr('readonly', 'readonly');
});

sample

http://fiddle.jshell.net/Pe4J5/

answered Sep 08 '11 at 10:43

Kimtho6

6,154
9
40
56

Put a field as read-only with javascript or jquery

6 Answers6