使用Javascript将disabled属性添加到input元素

时间:2010-09-27 18:29:38

标签: javascript jquery input onclick

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

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

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

这是因此隐藏的输入:

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

如何将disabled属性添加到输入?

9 个答案:

答案 0 :(得分:264)

$("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稳定性的教训......

答案 1 :(得分:43)

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

HTML WORLD

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

JS WORLD

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

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



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

答案 2 :(得分:12)

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

答案 3 :(得分:11)

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

答案 4 :(得分:8)

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

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

答案 5 :(得分: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";
}

答案 6 :(得分:5)

只需使用jQuery的attr()方法

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

答案 7 :(得分:1)

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

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

对于原生 js,您可以使用:

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

答案 8 :(得分:-1)

为此使用jQuery attr()方法:

$("#element_id").attr('disabled', 'disabled');