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

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

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

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

结果是隐藏的输入：

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

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

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

现在是2013年12月，我真的不知道该说些什么。

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

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

长话短说，到目前为止，这是最好的答案：“您可以同时使用这两者，但要视情况而定。”

您应该改为阅读以下答案：https : //stackoverflow.com/a/5876747/257493

其有关此更改的发行说明包括在此处：

.attr（）和.prop（）均不应用于获取/设置值。请改用.val（）方法（尽管使用.attr（“ value”，“ somevalue”）将继续起作用，就像在1.6之前一样。

首选用法摘要

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

换句话说：

“ .prop =非文档内容”

“ .attr” =文档内容

……

大家可以在这里学习有关API稳定性的课程吗...

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

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，则有几种不同的方法来设置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).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

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

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

只需使用jQuery的attr()方法

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', '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";
}