使用Javascript为输入元素添加disabled属性

Question

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

目前我有以下代码来隐藏我的输入框：

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

这是被隐藏的输入内容：

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

我该如何将禁用属性（disabled attribute）添加到输入框?

- user342391

Answer 1

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

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

以前一直是用 .attr()，然后变成了一直用 .prop()，所以我回到这里更新了答案，并使它更准确。

然后一年后 jQuery 又改变了他们的想法，我甚至都不想再追踪这个问题了。

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

你应该阅读这篇答案：https://dev59.com/LW025IYBdhLWcg3wqX1o#5876747

他们关于这个更改的发布说明在这里：

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

首选用法总结

.prop() 方法应该用于布尔属性/属性和 html 中不存在的属性（例如 window.location）。所有其他属性（可以在 html 中看到的属性）仍然可以和应该使用 .attr() 方法来操作。

换句话说：

".prop = 非文档相关内容"

".attr = 文档相关内容"

......

让我们从这里学到一个 API 稳定性的教训吧...

- Incognito

---

把英语翻译成中文。只返回翻译后的文本内容：+1，因为更新的文本足够大，让我注意到它。 - Vael Victus

@VaelVictus 不要这么快。很抱歉我发表这篇文章一年后，他们又改变了它...而我也忘记了这个答案。请阅读这个答案：https://dev59.com/LW025IYBdhLWcg3wqX1o#5876747 - Incognito

那种在.prop和.attr之间进行文档/非文档区分的方式非常有帮助，我以前从未见过这样简洁明了的解释。非常感谢！ - unrivaledcreations

今天仍在工作。 - ieselisra

Answer 2

我从我的源代码中获取了可运行的代码：

HTML世界

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

JavaScript世界

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

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



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

- Mircea Stanciu

---

对于通过谷歌搜索进入此处的人，请注意，直接从jQuery中得知：自jQuery 1.6起，.attr()方法对于未设置的属性返回undefined。若要检索和更改表单元素的已选中、禁用或禁止状态等DOM属性，请使用.prop()方法。 - Erenor Paz

Answer 3

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

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

- iConnor

---

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

是的，那对我来说太高级了，我不会走得那么远来提高性能。 - iConnor

虽然有点冗余，但如果你要处理一个元素的NodeList/数组，像那样通过索引选择它们是很愚蠢的。迭代或仅选择你需要的元素更有意义。 - user1596138

Answer 4

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

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

- user1596138

---

谢谢您提供了一个不需要 jQuery 的解决方案。 - Elias Zamaria

Answer 5

因为问题要求使用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";
}

- Viktor

Answer 6

你可以获取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';
          });
});

- user113716

Answer 7

只需使用jQuery的attr()方法。

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

- Gabe

---

使用.removeAttr('disabled')来移除禁用状态。 - ruhong

Answer 8

在JQuery中，您可以使用以下函数：

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

对于原生的 JavaScript，您可以使用以下代码：

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

- AristideWenceslas

---

嗨，欢迎来到StackOverflow！嗯，你能用代码块吗？这样会让其他人更容易阅读。只需在你的代码前后加上```即可。 - nouvist