使用jQuery禁用/启用输入框？

Question

$input.disabled = true;

或者

$input.disabled = "disabled";

哪个是标准的方法？相反地，你如何启用一个被禁用的输入框？

- omg

---

可能是 Remove disabled attribute using JQuery? 的重复问题。 - user2381114

我找到了DependsOn插件，你可能会觉得它很有用。 - Onshop

Answer 1

jQuery 1.6+

要更改disabled属性，您应该使用.prop()函数。

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

jQuery 1.5及以下版本

.prop()函数不存在，但是.attr()可以实现类似的功能：

设置disabled属性。

$("input").attr('disabled','disabled');

为了重新启用，正确的方法是使用 .removeAttr()。

$("input").removeAttr('disabled');

在任何版本的jQuery中

如果你只需要处理一个元素，你可以始终依赖于实际的DOM对象，这可能比其他两个选项稍微快一些：

// assuming an event handler thus 'this'
this.disabled = true;

使用.prop()或.attr()方法的优点是可以为一组选择的项目设置属性。

---

注意：在1.6版本中，有一个.removeProp()方法，听起来很像removeAttr()，但不应该用于删除像'disabled'这样的本地属性。摘自文档:

注意：不要使用此方法删除像checked、disabled或selected等本地属性。 这将完全删除该属性，并且一旦删除，就无法再次添加到元素中。相反，请使用.prop()将这些属性设置为false。

事实上，我怀疑这种方法存在许多合法的用途。布尔属性的处理方式是将它们设为false，而不是像在1.5版本中的“属性”对应项中那样“删除”它们。

- gnarf

---

顺便提一下，如果你想禁用所有表单控件，包括复选框、单选按钮、文本域等，你需要选择 ':input'，而不仅是 'input'。后者只会选择实际的<input>元素。 - Cornel Masson

使用input、textarea、select和button要比使用:input选择器更好一些--因为:input作为选择器效率很低，它需要选择*然后循环每个元素并按标签名过滤--如果你直接传递这4个标签名选择器，则会快得多。另外，:input不是标准的CSS选择器，所以使用querySelectorAll可能带来的性能提升都会丧失。 - gnarf

这只是防止用户访问它，还是实际从网络请求中移除了它？ - OneChillDude

在某些浏览器（例如 Chrome），使用.removeProp("disabled")会导致属性完全删除并且无法再次添加，这是由@ThomasDavidBaker指出的问题。而在其他一些浏览器（例如Firefox）上可以正常工作。我们应该非常小心。在这种情况下，应始终使用.prop("disabled",false)。 - Sandeepan Nath

既不.prop也不.attr足以禁用锚元素；.prop甚至不会使“控件”变灰（.attr会，但href仍然活动）。您还必须添加一个调用preventDefault()的单击事件处理程序。 - Jeff Lowery

Answer 2

只是为了新惯例和使其适应未来（除非ECMA6发生重大变化）而已：

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

与

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

- geekbuntu

---

哎呀！为什么要用 $(document).on('event_name', '#your_id', function() {...}) 而不是 $('#your_id').on('event_name', function() {...})。根据jQuery .on()文档所述，前者使用委派机制，并监听所有冒泡到 document 的 event_name 事件，并检查它们是否与匹配的 #your_id 相符。后者仅监听 $('#your_id') 事件，因此可扩展性更好。 - Peter V. Mørch

前者适用于在任何时间点插入到DOM中的元素，后者仅适用于当前存在的元素。 - crazymykl

@crazymykl 正确，但您不应该添加已经存在于页面上的id元素。 - SepehrM

Answer 3

// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );

有时候您需要禁用/启用表单元素，例如输入框或文本域。JQuery 可以通过将 disabled 属性设置为 "disabled" 来轻松实现此操作。 例如：

//To disable 
$('.someElement').attr('disabled', 'disabled');

为了启用被禁用的元素，您需要从该元素中删除 "disabled" 属性或将其字符串清空。例如：

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

参考文献：http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html 该文章介绍了如何使用JavaScript来禁用或启用HTML元素。

- Harini Sekar

Answer 4

$("input")[0].disabled = true;

或者

$("input")[0].disabled = false;

- Sajjad Shirazy

---

当然，问题要求使用jQuery，但这里使用了纯JavaScript来改变状态，不过它有效。 - basic6

这会改变JavaScript中的状态，但仍然使用jQuery选择器来获取第一个输入。 - cjsimon

我不认为我们在这里制作jQuery百科全书，如果一个答案可以解决问题，那就很好。 - Sajjad Shirazy

Answer 5

有许多方法可以使用它们来启用/禁用任何元素：

方法1

$("#txtName").attr("disabled", true);

方法2

$("#txtName").attr("disabled", "disabled");

如果您正在使用jQuery 1.7或更高版本，则请使用prop()而不是attr()。

$("#txtName").prop("disabled", "disabled");

如果您希望启用任何元素，则只需执行与禁用相反的操作。但是，jQuery提供了另一种方法来删除任何属性。 方法1

$("#txtName").attr("disabled", false);

方法二

$("#txtName").attr("disabled", "");

方法三

$("#txtName").removeAttr("disabled");

如果您使用的是jQuery 1.7或更高版本，则使用prop()而不是attr()。就是这样。这就是如何使用jQuery启用或禁用任何元素。

- wild coder

Answer 6

像这样使用，

 $( "#id" ).prop( "disabled", true );

 $( "#id" ).prop( "disabled", false );

- Abdus Salam Azad

Answer 7

如果您只想反转当前状态（例如切换按钮行为）：

$("input").prop('disabled', ! $("input").prop('disabled') );

如评论中所述，以下代码也可以切换属性：

$("input").prop('disabled', function(i, v) { return !v; });

- David Gras

---

谢谢，我对于切换也有同样的东西；$("input").prop('disabled', function(i, v) { return !v; }); - Floww

Answer 8

您可以在代码的全局位置放置以下内容：

您可以在代码的全局位置放置以下内容：

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

然后你可以写一些东西，比如：

$(".myInputs").enable();
$("#otherInput").disable();

- Nicu Surdu

---

尽管使用功能包装很方便，但是在使用disabled属性时，应该使用prop而不是attr才能正确工作（假设使用jQuery 1.6或更高版本）。 - iCollect.it Ltd

@TrueBlueAussie 使用 attr 的缺点是什么？我在一些项目中使用上述代码，就我所记得的，它可以正常工作。 - Nicu Surdu

明显的例外是具有幕后属性的控件。最著名的是复选框的“checked”属性。使用“attr”将无法得到相同的结果。 - iCollect.it Ltd

Answer 9

2018年更新:

现在不再需要使用jQuery，document.querySelector或document.querySelectorAll（用于多个元素）已经几乎完全取代了$，并且还有更明确的方法，如getElementById，getElementsByClassName，getElementsByTagName

禁用“input-checkbox”类的一个字段

document.querySelector('.input-checkbox').disabled = true;

或多个元素。

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

- Pawel

---

这个问题特别涉及到jQuery...但同样你的陈述是正确的，值得知道的是当有多个元素时，不再需要使用jQuery。 - ADyson

Answer 10

这对我有效

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);

- Siddhartha