使用Javascript向输入元素添加禁用属性

Posted 2023-02-22

【中文标题】使用Javascript向输入元素添加禁用属性

【英文标题】：Add disabled attribute to input element using Javascript

【发布时间】：2011-04-17 22:15:01

【问题描述】：

我有一个输入框，我希望禁用它，同时隐藏它以避免在移植我的表单时出现问题。

到目前为止，我有以下代码来隐藏我的输入：

$(".shownextrow").click(function()  
    $(this).closest("tr").next().show().find('.longboxsmall').hide();
);

这是被隐藏的输入：

<input class="longboxsmall" type="text" />

如何将 disabled 属性也添加到输入中？

【参考方案1】：

$("input").attr("disabled", true); 至...我不知道了。

现在是 2013 年 12 月，我真的不知道该告诉你什么。

首先它总是.attr()，然后它总是.prop()，所以我回到这里更新了答案并使其更准确。

一年后，jQuery 再次改变了主意，我什至不想跟踪这一点。

长话短说，就目前而言，这是最好的答案：“您可以同时使用两者……但这取决于情况。”

您应该改为阅读此答案：https://***.com/a/5876747/257493

此处包含他们对该更改的发行说明：

.attr() 和 .prop() 都不应该用于获取/设置值。改用 .val() 方法（尽管使用 .attr("value", "somevalue") 将继续工作，就像 1.6 之前一样）。

首选用法摘要

.prop() 方法应该用于布尔属性/属性以及 html 中不存在的属性（例如 window.location）。所有其他属性（您可以在 html 中看到的属性）可以并且应该继续使用 .attr() 方法进行操作。

或者换句话说：

".prop = 非文档内容"

".attr" = 文档内容

... ...

愿我们都在这里学到关于 API 稳定性的教训...

【讨论】：

+1 使更新文本足够大，让我注意到

@VaelVictus 没那么快。很抱歉，在我发布此内容一年后，他们再次更改了它……我忘记了这个答案。阅读此答案：***.com/a/5876747/257493

.prop 和 .attr 之间的文档/非文档区分非常有用，我以前从未见过以如此简洁的方式构建的上下文。非常感谢！

【参考方案2】：

来自我的来源的工作代码：

HTML 世界

<select name="select_from" disabled>...</select>

---

JS世界

var from = jQuery('select[name=select_from]');

//add disabled
from.attr('disabled', 'disabled');



//remove it
from.removeAttr("disabled");

【讨论】：

作为来自谷歌的人的说明，直接来自jQuery:As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method

【参考方案3】：

如果您使用的是 jQuery，那么有几种不同的方法可以设置 disabled 属性。

var $element = $(...);
    $element.prop('disabled', true);
    $element.attr('disabled', true); 

    // The following do not require jQuery
    $element.get(0).disabled = true;
    $element.get(0).setAttribute('disabled', true);
    $element[0].disabled = true;
    $element[0].setAttribute('disabled', true);

【讨论】：

$element.eq(0)[0].disabled = true; 怎么样？ :-P

是的，这对我来说太先进了，我不会为了提高性能而走那么远。

+1。虽然有点多余。如果您要处理 NodeList/元素数组，那么通过索引选择它们是愚蠢的。迭代或仅选择您需要的元素更有意义。

【参考方案4】：

$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

以上所有都是完全有效的解决方案。选择最适合您需求的一种。

【讨论】：

感谢您提供不需要 jQuery 的解决方案。

【参考方案5】：

可以获取DOM元素，直接设置disabled属性。

$(".shownextrow").click(function()  
  $(this).closest("tr").next().show()
          .find('.longboxsmall').hide()[0].disabled = 'disabled';
);

或者如果有多个，你可以使用each()来设置它们：

$(".shownextrow").click(function()  
  $(this).closest("tr").next().show()
          .find('.longboxsmall').each(function() 
               this.style.display = 'none';
               this.disabled = 'disabled';
          );
);

【参考方案6】：

由于问题是询问如何使用 JS 来做到这一点，所以我提供了一个普通的 JS 实现。

var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) 
  element.disabled = "disabled";

【参考方案7】：

只需使用 jQuery 的 attr() 方法

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');

【讨论】：

并使用.removeAttr('disabled');删除禁用状态

【参考方案8】：

在 JQuery 中你可以使用以下函数：

$("input").prop('disabled', true);
$("input").prop('disabled', false);

对于原生 js，你可以使用：

document.getElementById("myElement").disabled = true;

【讨论】：

嗨，欢迎来到 ***！嗯，你可以在上面使用代码块吗？这将使其他人易于阅读。只需在代码之前和之后放置 ```。