关于javascript：使用jQuery禁用/启用输入？


Disable/enable an input with jQuery?

1
$input.disabled = true;

或

1
$input.disabled ="disabled";

哪种方式是标准的？相反，如何启用禁用的输入？

相关讨论

jQuery 1.6 +

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

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

jquery 1.5及以下

.prop()功能不存在，但.attr()功能类似：

设置禁用属性。

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

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

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

在jquery的任何版本中

如果只处理一个元素，则可以始终依赖实际的DOM对象，并且可能比其他两个选项快一点：

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

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

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

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

事实上，我怀疑这个方法有很多合法的用途，布尔属性的实现方式是这样的，您应该将它们设置为假，而不是像1.5中的"属性"对应项那样"删除"它们。

相关讨论

只是为了适应新的惯例，并使其能够适应未来的发展(除非ECMA6发生了巨大变化(？？？？？)

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

和

1
2
3
$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');  
});
相关讨论

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

有时您需要禁用/启用表单元素，如输入或文本区域。jquery通过将disabled属性设置为"disabled"，帮助您轻松实现这一点。例如：

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

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

1
2
3
4
5
//To enable
$('.someElement').removeAttr('disabled');

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

请参阅：http://garmoncheg.blogspot.fr/2011/07/how-to-disableable-element-with.html

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

或

1
$("input")[0].disabled = false;
相关讨论

您可以在代码中将其置于全局位置：

1
2
3
4
5
6
7
8
9
10
11
$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

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

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

1
2
$(".myInputs").enable();
$("#otherInput").disable();
相关讨论

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

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

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

方法1

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

方法2

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

如果您使用的是jquery 1.7或更高版本，那么使用prop()，而不是attr()。

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

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

方法1

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

方法2

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

方法3

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

同样，如果您使用的是jquery 1.7或更高版本，那么使用prop()，而不是attr()。就是这样。这是使用jquery启用或禁用任何元素的方法。

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

例子：

1
2
3
4
5
6
7
8
9
10
11
12
<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);
                }
            });
        });

2018年更新：

现在不需要jquery了，已经有一段时间了，因为document.querySelector或document.querySelectorAll(对于多个元素)的工作几乎与美元完全相同，加上更明确的getElementById、getElementsByClassName、getElementsByTagName。

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

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

或多个元素

1
document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
相关讨论

禁用：

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

使能：

1
2
$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.

对输入类型禁用true:

In case of a specific input type (Ex. Text type input)

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

For all type of input type

1
$("input").attr('disabled', true);
相关讨论

我使用了@gnarf answer并添加了它作为函数

1
2
3
4
5
6
7
   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

然后像这样使用

1
$('#myElement').disable(true);

这对我有用

1
2
$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
2018年，无jquery(es6)

禁用所有input：

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

用id="my-input"禁用input。

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

这个问题是关于jquery的，仅供参考。

像这样使用，

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

    $("#id" ).prop("disabled", false );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>

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



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


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


</body>
</html>
相关讨论

在jquery mobile中：

停用

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

为使能

1
2
$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');