Setting input field readonly with Javascript

Question

I'm setting the value for SecretAttribute dynamically via another script, but at the moment I'm having difficulties making the Name input field as readonly.

Tried setting the getElementByID by SecretAttribute and SecretElement, but no dice..

<input name="SecretAttribute" id="SecretAttribute" value="Y" type="checkbox" checked/> 
<html>
<head>
 <title>Demo Title</title>
<script type="text/javascript"> 
var SecretElement = document.getElementById('SecretAttribute');\
if (document.getElementById("SecretAttribute").checked;) {
    function DataCheck() {
    document.getElementById('Name').readOnly = true;
  } 
}

</script>
</head>
<body onload="DataCheck()">

  Demo6.1<br>
  Name: <input type="text" id="Name" name="Name"><br>

</body>
</html>

What does *but no dice* mean? What exactly isn't working? that is the correct way to set the readonly attribute. Have you debugged this code? — Liam, Feb 06 '19 at 09:40

score 2 · Accepted Answer · answered Feb 06 '19 at 09:42

Function call was inside the if statement. Put the if condition inside the call

  function DataCheck() {
    if(document.getElementById("SecretAttribute").checked)
    document.getElementById('Name').readOnly = true;
  } 

var SecretElement = document.getElementById('SecretAttribute');

<input name="SecretAttribute" id="SecretAttribute" value="Y" type="checkbox" checked/> 
<html>
<head>
 <title>Demo Title</title>

</head>
<body onload="DataCheck()">

  Demo6.1<br>
  Name: <input type="text" id="Name" name="Name" value="You can't edit this"><br>

</body>
</html>

score 0 · Answer 2 · edited Feb 06 '19 at 09:50

0

If your using older browsers try using setAttribute, something like...

  var SecretElement = document.getElementById('SecretAttribute');
  if (SecretElement.checked) {
    document.getElementById('Name').setAttribute("readonly","readonly");
  }

edited Feb 06 '19 at 09:50

Liam

22,818
25
93
157

answered Feb 06 '19 at 09:40

Rik Lewis

723
4
10

[There is nothing wrong with that way of setting readonly](https://stackoverflow.com/a/1759343/542251) – Liam Feb 06 '19 at 09:41
If you read the comments on the thread you've linked to, this doesn't work in all browsers – Rik Lewis Feb 06 '19 at 09:43
This was likely true in 2009 – Liam Feb 06 '19 at 09:44
1

IE10, whilst a dog, still exists. The asker hasn't said what browser they are using. – Rik Lewis Feb 06 '19 at 09:45
Without explicit information on what browser he needs supporting `setAttribute` is dangerous. – ukaric Feb 06 '19 at 09:48
2

How is it dangerous? – Rik Lewis Feb 06 '19 at 09:48

Setting input field readonly with Javascript

2 Answers2