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

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

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

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

这是结果隐藏的输入:

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

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

503775 次浏览
小开

$("input").attr("disabled", true);到目前为止... 我不知道了。

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

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

一年之后，jQuery 再次改变了他们的想法，我甚至不想继续关注这个问题。

长话短说，到目前为止，这是最好的答案: “你可以同时使用... ... 但这取决于情况。”

你应该读这个答案: https://stackoverflow.com/a/5876747/257493

他们的更改发布说明包括在这里:

都不是。也没有。道具()应该用于获取/设置值。使用。Val ()方法(尽管使用。Attr (“ value”，“ somevalue”)将继续工作，就像1.6之前一样。

首选用法摘要

那个。方法应该用于布尔属性/属性以及 html 中不存在的属性(例如 window.location)。所有其他属性(您可以在 html 中看到的属性)可以并且应该继续使用。Attr ()方法。

换句话说:

道具 = 非文档的东西

“ . attr”= 文档内容

...

希望我们都能从 API 的稳定性中吸取教训..。

小开

只需使用 jQuery 的 attr()方法

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

您可以获取 DOM 元素，并直接设置禁用属性。

$(".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';
});
});
小开 
$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true);
element.disabled = true;
element.setAttribute('disabled', true);

以上都是完全有效的解决方案。选择一个最适合你的需要。

小开

如果您正在使用 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);
小开

工作代码来自我的来源:

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");
小开

由于问题是如何在 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";
}

小开

在 JQuery 中，可以使用以下函数:

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

对于本地 js，你可以使用:

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

提交答案