document.getElementById('foo').disabled = true;

或者

document.getElementById('foo').readOnly = true;

请注意，readOnly应该在驼峰式大小写中才能在 Firefox 中正常工作（魔术）。

演示：https : //jsfiddle.net/L96svw3c/——在某种程度上解释了disabled和之间的区别readOnly。

如果您在页面呈现时知道这一点，这听起来像您这样做，因为数据库有一个值，最好在呈现时禁用它而不是 JavaScript。为此，只需将readonly属性（或者disabled，如果您还想从表单提交中删除它）添加到<input>，如下所示：

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

如果数据是从数据库填充的，您可能会考虑不使用<input>标签来显示它。不过，您可以直接在标签中禁用它：

<input type='text' value='${magic.database.value}' disabled>

如果您稍后需要使用 Javascript 禁用它，您可以设置“禁用”属性：

document.getElementById('theInput').disabled = true;

我建议不要将值显示为 an 的原因<input>是，根据我的经验，它会导致布局问题。如果文本很长，那么<input>用户将需要尝试滚动文本，这不是正常人会猜到的。如果你只是将它放入 a<span>或其他东西，你会有更多的造型灵活性。

你也可以通过jquery：

$('#foo')[0].disabled = true;

工作示例：

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

获取您喜欢的输入框的引用（例如document.getElementById('mytextbox')）并将其readonly属性设置为true：

myInputBox.readonly = true;

或者，您可以简单地内联添加此属性（不需要 JavaScript）：

<input type="text" value="from db" readonly="readonly" />