【问题标题】:Make input text disabled/readonly in IE9 and below using javascript/jQuery使用 javascript/jQuery 在 IE9 及以下版本中禁用/只读输入文本
【发布时间】:2014-02-24 07:34:34
【问题描述】:

有人知道怎么做吗?

我试过下面的 JavaScript 没用。

element.readOnly="true";
element.readonly="readonly";
element.disabled="disabled";

试过下面的jQuery也没有用。

$("#id").attr("disabled","disabled");
$("#id").attr("disabled",true);
$("#id").attr("readonly",true);
$("#id").attr("readonly","readonly");

我做错了什么还是有其他方法可以在 ie9 及以下版本中实现这一点?

谢谢

【问题讨论】:

  • 应该可以。也许element 不是你当时想的那样。

标签: javascript jquery html text input


【解决方案1】:

如果您在元素上设置 attribute 值,那么您需要使用与您设置的属性相同的字符串。例如,如果您正在设置disabled 属性,那么您应该将其设置为等于"disabled"

HTML

<input type="text" disabled="disabled" />

JavaScript

$("#id").attr("disabled", "disabled");

如果您要设置 属性 值,则需要使用布尔值:truefalse。属性只能在 JavaScript 中设置:

JavaScript

element.disabled = true;

在上面的第一个示例中,您将 JavaScript 属性设置为字符串,而不是布尔值。这就是它不起作用的原因。

以下是适合您的可能性:

//Any of the following work
element.readOnly = true; //It is readOnly, not readonly
element.disabled = true;

$("#id").attr("disabled", "disabled");
$("#id").attr("readonly", "readonly");

//Additionally, you can use jQuery's prop() method, but I don't recommend it.
$("#id").prop("disabled", true);
$("#id").prop("readOnly", true);
$("#id").prop("readonly", true); //jQuery will bridge the gap here, and fix this for you.

了解disabledreadonly 提供不同的功能也很重要:

  • disabled 表示你根本无法与元素交互。 disabled 的元素是不可变的,这意味着它们的值不能被修改。它们也会从表单提交中省略。
  • readonly 表示您根本无法更改元素的值。

【讨论】:

  • 为什么不推荐 jQuery 的 .prop() (因为它正是为此目的而设计的)
  • @Spudley 因为与其他同样易于使用的方法相比,它的速度很慢。
  • @Spudley 这是一个jsperf 来支持该声明。
  • 毫不奇怪;原始 DOM 将总是胜过库。但我以为你在谈论 $().prop()$().attr()。这并不完全与性能有关($().prop() 存在于 jQuery 中,与 $().attr() 分开是有原因的,这个原因与性能无关),但无论如何我有 modified your test to include jQuery attr,是的,attr 比 prop 快,但与原始 DOM 方法相比,差异很小。
  • jQuery.attr()jQuery.prop() 做完全不同的事情。为什么我要比较两者? DOM 元素属性和 JavaScript 属性之间有很大的区别。关键是jQuery.prop() 效率非常低,除非它提供一些极端好处(可能永远不会),否则不应使用它。是的,它可以使您不必循环遍历 jQuery 集合,并将属性应用于 for 循环中的每个元素。因此,它在某些情况下几乎增加了可读性,但这种可读性被相当大的性能损失所抵消。特别是对于大型收藏。
【解决方案2】:

disabledreadonly 是属性而不是属性。

这种区别很重要,因为 jQuery 为设置属性和属性提供了不同的方法。

您应该使用$().prop() 而不是$().attr() 来设置它们。

$("#id").prop("disabled",true);
$("#id").prop("readonly",true);

使用.attr() 将不起作用。 (它曾经可以工作,早在 jQuery 1.5 时代,但自从他们在 jQuery 1.6 中引入 .prop() 之后就不行了)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-10-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-07-30
    • 2013-05-28
    • 2014-02-18
    相关资源
    最近更新 更多