如何移除“disabled”;属性使用jQuery?

我必须首先禁用输入，然后单击链接启用它们。

这是我迄今为止尝试过的方法，但行不通。

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

jQuery:

$("#edit").click(function(event){
event.preventDefault();
$('.inputDisabled').removeAttr("disabled")
});
< p > < br > 这显示了我true，然后false，但输入没有任何变化:

$("#edit").click(function(event){
alert('');
event.preventDefault();
alert($('.inputDisabled').attr('disabled'));
$('.inputDisabled').removeAttr("disabled");
alert($('.inputDisabled').attr('disabled'));
});
794471 次浏览
小开
最佳答案

总是在使用jQuery时使用prop()方法来启用或禁用元素(原因见下文)。

在你的情况下，它将是:

$("#edit").click(function(event){
event.preventDefault();
$('.inputDisabled').prop("disabled", false); // Element(s) are now enabled.
});

jsFiddle示例

当可以使用attr()/removeAttr()时，为什么要使用prop()呢?

基本上，在获取或设置属性(如autoplay， checked， disabled和required等)时应该使用prop()。

虽然你想要做的可以在技术上可以使用attr()/removeAttr()来完成，但这并不意味着它可以完成应该——并且可能会导致奇怪/有问题的行为，就像在这种情况下。

"属性和属性之间的区别可能是重要的 具体的情况。在jQuery 1.6之前，.attr()方法有时 在检索某些属性时考虑了属性值， 这可能会导致行为不一致。从jQuery 1.6开始，.prop() . js 方法提供了显式检索属性值的方法，而 .attr()检索属性。"

"属性通常影响DOM元素的动态状态 改变序列化的HTML属性。例子包括value 属性，输入元素的disabled属性和 按钮或复选框的checked属性。.prop()方法 应该用来设置disabled和checked，而不是.attr() 方法。.val()方法应该用于获取和设置 value !”——jQuery prop()文档 < / p >

jquery 3.0之前(2016年之前)

你应该使用prop而不是removeAttr()的原因是removeAttr()完全删除了disabled属性本身——因为这个方法会简单地将相应的属性名称设置为false:

在jQuery 3.0之前，在布尔属性上使用.removeAttr() 如勾选、选中或只读也会设置相应的 指定属性为false。这种行为是古代所需要的 版本的Internet Explorer，但不适合现代浏览器 因为属性表示初始值和属性 表示当前(动态)值。——jQuery 3.0突破性变化 < / p >

而prop()只是将属性的底层布尔值设置为false。

小开 
<input type="text" disabled="disabled" class="inputDisabled" value="">
​<button id="edit">Edit</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​


$("#edit").click(function(event){
event.preventDefault();
$('.inputDisabled').removeAttr("disabled")
});​

http://jsfiddle.net/ZwHfY/

小开

像这样使用，

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">


<div id="edit">edit</div>

JS:

 $('#edit').click(function(){ // click to
$('.inputDisabled').attr('disabled',false); // removing disabled in this class
});
小开

我认为你正在尝试切换禁用状态，在这种情况下，你应该使用这个(从这个问题):

$(".inputDisabled").prop('disabled', function (_, val) { return ! val; });

这是一个工作小提琴

小开

认为这可以很容易地设置

$(function(){
$("input[name^=radio_share]").click
(
function()
{
if($(this).attr("id")=="radio_share_dependent")
{
$(".share_dependent_block input, .share_dependent_block select").prop("disabled",false);
}
else
{
$(".share_dependent_block input, .share_dependent_block select").prop("disabled",true);
}
}
);
});
小开

要删除禁用的属性使用，

 $("#elementID").removeAttr('disabled');

要添加禁用属性use，

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

享受:)

小开

这是唯一适用于我的代码:

element.removeProp('disabled')

注意它是removeProp而不是removeAttr。

我在这里使用jQuery 2.1.3。

小开

这个问题特别提到了jQuery，但如果你想在没有jQuery的情况下完成这个任务，那么在普通JavaScript中等价的是:

elem.removeAttribute('disabled');
小开

2018，没有JQuery

我知道这个问题是关于JQuery的:这个答案只是供参考。

document.getElementById('edit').addEventListener(event => {
event.preventDefault();
[...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
});
小开

用于删除禁用属性

 $('#inputDisabled').removeAttr('Disabled');

用于添加禁用属性

 $('#inputDisabled').attr('disabled', 'disabled' );
小开

尝试特殊的选择器:

Not working: $('#ID_Unit').removeAttr("disabled");
工作:$('select[id=ID_Unit]:disabled').removeAttr("disabled");

所有的“选择”;控制$('select:disabled').removeAttr("disabled");

“选择”;控制类型是否像"type"等。


提交答案