使用 javascript 或 jquery 将字段设置为只读答案

【问题标题】：Put a field as read-only with javascript or jquery使用 javascript 或 jquery 将字段设置为只读
【发布时间】：2011-09-08 10:40:45
【问题描述】：

我尝试将一个项目设置为只读，正如您在代码中看到的那样，我尝试了多种方法，但无法使其正常工作。谁能帮我解决这个问题？

<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>

【问题讨论】：

这篇文章可以帮助你stackoverflow.com/questions/1306708/…
感谢所有快速回复，我让它工作。 :)

标签： javascript jquery

【解决方案1】：

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

工作示例：http://jsfiddle.net/FBUDt/

【讨论】：

【解决方案2】：

这应该适合你：

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

请记住，在尝试查找元素之前需要加载 DOM

你可以使用 jquerys DOM-ready

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

你用的是什么版本的jquery？

【讨论】：

【解决方案3】：

您应该尝试将您的代码包装到$('document').ready();

根据documentation，

传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他 jQuery 代码的最佳位置。

原来是这样：

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

【讨论】：

【解决方案4】：

您不能引用稍后在文档中创建的元素。将脚本向下移动到表单下方，或将其放在 document.ready 块中。此外，您应该在 jQuery 1.6+ 中使用 $.prop()

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

【讨论】：

【解决方案5】：

我会选择

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

但这不是问题。脚本的位置是出错的地方。您正在尝试更改不存在的元素。

<!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>

如果您将脚本放在关闭 </body> 标记之前，那么它会在 DOM 构建后立即执行。

请。停止使用 JS 库来做最基本的事情。

【讨论】：

由于 setAttribute() 在 IEreference.sitepoint.com/javascript/Element/…），因此使用 jQuery 非常合理。
@Jens Roland 你怎么能防御为设置单个属性添加 20KB 膨胀？ IE有问题..没问题..检查一下。或者将值设置为document.getElementByID('test').readOnly。但是不要因为无知而提倡使用庞大的JS库。
哈哈....我当然不会为此辩护。我假设他已经在使用 jQuery 并且更多了，否则他不会标记问题'jQuery'
@Jens Roland 总是期待最坏的情况。
@jens 这也是我和（几乎）每个人都可能认为的

【解决方案6】：

你不见了

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

样本

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

【讨论】：