2449
$input.disabled = true;

或者

$input.disabled = "disabled";

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

4

19 回答 19

4012

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。

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

于 2009-09-12T05:23:34.067 回答
66

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

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

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});
于 2012-07-18T11:51:54.380 回答
38
    // 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

于 2014-04-07T10:27:16.560 回答
16
$("input")[0].disabled = true;

或者

$("input")[0].disabled = false;
于 2014-09-06T14:53:40.183 回答
11

您可以通过多种方式启用/禁用任何元素

方法一

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

方法二

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

如果您使用的是 jQuery 1.7 或更高版本,请使用 prop(),而不是 attr()。

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

如果您希望启用任何元素,那么您只需执行与禁用它的操作相反的操作。然而 jQuery 提供了另一种删除任何属性的方法。

方法一

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

方法二

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

方法 3

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

同样,如果您使用 jQuery 1.7 或更高版本,请使用 prop(),而不是 attr()。那是。这是您使用 jQuery 启用或禁用任何元素的方式。

于 2018-08-02T10:59:38.687 回答
9

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

$.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();
于 2014-10-18T13:42:39.583 回答
8

如果您只想反转当前状态(如切换按钮行为):

$("input").prop('disabled', ! $("input").prop('disabled') );
于 2014-09-12T16:28:25.370 回答
6

像这样使用,

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

 $( "#id" ).prop( "disabled", false );
于 2018-10-31T08:38:36.103 回答
2

2018 年更新:

现在不再需要 jQuery 并且已经有一段时间了,因为document.querySelector or document.querySelectorAll(对于多个元素)与 $ 几乎完全相同的工作,加上更明确的工作getElementById, getElementsByClassName,getElementsByTagName

禁用“输入复选框”类的一个字段

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

或多个元素

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
于 2018-02-11T18:29:49.133 回答
2

您可以使用 jQuery prop() 方法来禁用或启用表单元素或使用 jQuery 动态控制。prop() 方法需要 jQuery 1.6 及更高版本。

例子:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>
于 2018-08-02T10:26:25.013 回答
2

这对我有用

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
于 2019-02-22T13:50:58.560 回答
1

为输入类型禁用 true :

在特定输入类型的情况下(例如文本类型输入

$("input[type=text]").attr('disabled', true);

对于所有类型的输入类型

$("input").attr('disabled', true);
于 2017-12-19T16:33:08.920 回答
1

禁用:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

使能够:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.
于 2018-09-21T07:04:29.357 回答
1

禁用输入字段的另一种方法是使用 jQuery 和 css,如下所示:

jQuery("#inputFieldId").css({"pointer-events":"none"})

并启用相同的输入,代码如下:

jQuery("#inputFieldId").css({"pointer-events":""})
于 2021-03-02T09:19:02.393 回答
0
<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>
于 2015-09-26T10:22:38.453 回答
0

我使用了@gnarf 答案并将其添加为函数

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

然后像这样使用

$('#myElement').disable(true);
于 2017-11-16T10:24:59.390 回答
0

2018 年,没有 JQuery (ES6)

全部禁用input

[...document.querySelectorAll('input')].map(e => e.disabled = true);

禁用input_id="my-input"

document.getElementById('my-input').disabled = true;

问题在于JQuery,仅供参考。

于 2018-06-04T13:43:36.603 回答
0

方法 4(这是wild coder answer的扩展)

txtName.disabled=1     // 0 for enable
<input id="txtName">

于 2020-01-09T18:50:58.613 回答
-1

在 jQuery Mobile 中:

对于禁用

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

对于启用

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
于 2016-06-14T11:12:21.050 回答