使用 jQuery 禁用/启用输入?

IT技术 javascript jquery html-input disabled-input
2021-02-05 02:24:02
$input.disabled = true;

或者

$input.disabled = "disabled";

哪个是标准方式?而且,相反,您如何启用禁用的输入?

6个回答

jQuery 1.6+

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

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

jQuery 1.5 及以下

.prop()功能不存在,但.attr()类似:

设置禁用属性。

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

要再次启用,正确的方法是使用 .removeAttr()

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

在任何版本的 jQuery 中

你总是可以依赖实际的 DOM 对象,如果你只处理一个元素,它可能比其他两个选项快一点:

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

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


注意:在 1.6 中,有一种.removeProp()方法听起来很像removeAttr(),但它不应该用于本机属性,例如'disabled' 文档中的摘录:

注意:请勿使用此方法删除本机属性,例如已选中、已禁用或已选中。这将完全删除该属性,一旦删除,将无法再次添加到元素中。使用 .prop() 将这些属性设置为 false。

事实上,我怀疑这个方法有很多合法的用途,布尔props是以这样一种方式完成的,你应该将它们设置为 false 而不是像 1.5 中的“属性”对应物那样“删除”它们

顺便说一句,请记住,如果您想禁用所有表单输入控件 - 包括。复选框、收音机、文本区域等 - 您必须选择':input',而不仅仅是'input'. 后者只选择实际的 <input> 元素。
2021-03-10 02:24:02
@CornelMassoninput,textarea,select,button比使用好一点:input-:input因为选择器效率很低,因为它必须选择*然后循环每个元素并按标记名过滤 - 如果直接传递 4 个标记名选择器,它会快得多。此外,:input它不是标准的 CSS 选择器,因此可能querySelectorAll会失去任何可能的性能提升
2021-03-17 02:24:02
.prop 或 .attr 都不足以禁用锚元素;.prop 甚至不会使“控件”变灰(.attr 会,但 href 仍然处于活动状态)。您还必须添加一个调用 preventDefault() 的点击事件处理程序。
2021-03-27 02:24:02
这只是阻止用户访问它,还是实际上将其从 Web 请求中删除?
2021-04-01 02:24:02
.removeProp("disabled")正如@ThomasDavidBaker 指出的那样,使用会导致“属性被完全删除并且不再添加”的问题,在某些浏览器(如 Chrome)的情况下,而它在某些浏览器(如 Firefox)上运行良好。我们在这里真的应该小心。总是使用.prop("disabled",false)代替
2021-04-06 02:24:02

只是为了新的约定 && 使其适应未来(除非 ECMA6(????) 发生了巨大变化):

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

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});
@crazymykl 正确,但您不应添加具有已存在于您的页面上的 id 的元素。
2021-03-26 02:24:02
前者适用于任何时候插入 DOM 的元素,后者仅适用于当时存在的元素。
2021-03-28 02:24:02
咳咳!为什么$(document).on('event_name', '#your_id', function() {...})而不是$('#your_id').on('event_name', function() {...}). jQuery .on() 文档中所述,前者使用委托并侦听冒泡的所有 event_name事件document并检查它们是否匹配#your_id. 后者$('#your_id')专门侦听事件,并且扩展性更好。
2021-04-03 02:24:02
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

有时您需要禁用/启用表单元素,如 input 或 textarea。Jquery 通过将禁用属性设置为“禁用”来帮助您轻松实现此目的。例如:

  //To disable 
  $('.someElement').attr('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

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

或者

$("input")[0].disabled = false;
当然,问题是针对 jQuery 提出的,这正在改变纯 JavaScript 中的状态,但它确实有效。
2021-03-25 02:24:02
但我不认为我们在这里制作 jquery 的百科全书,如果答案有效,那就太好了
2021-04-05 02:24:02
这会改变 JavaScript 中的状态,但它仍然使用 jQuery 选择器来获取第一个输入。
2021-04-08 02:24:02

您可以将其放在代码中的全局位置:

$.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();
@TrueBlueAussie 使用的缺点是attr什么?我在一些项目中使用了上面的代码,据我所知它工作正常
2021-03-11 02:24:02
明显的例外是在幕后具有属性的控件。最著名的是checked复选框属性。使用attr不会产生相同的结果。
2021-03-20 02:24:02
虽然包装功能很方便,但您应该使用prop不是 attr使用该disabled属性才能正常工作(假设 jQuery 1.6 或更高版本)。
2021-04-07 02:24:02