https://stackoverflow.com/a/2874745/335565

HTML

<input type="text" id="disabled" value="disabled" />
<input type="text" id="readOnly" value="readOnly" />
<input type="text" id="readonly" value="readonly" />

CSS

input {
  display: block;
  text-align: center;
  width: 64px;
}

JavaScript

document.getElementById('disabled').disabled = true
document.getElementById('readOnly').readOnly = true
document.getElementById('readonly').readonly = true