2015-09-26 73 views
5

输入元素可以很容易地禁用,但有什么方法可以启用它们?无法启用禁用的输入

以下代码可以禁用但不启用输入元素。

$('#dis').click(function() { 
 
    $('#inp').attr('disabled', 'true'); 
 
}); 
 

 
$('#enb').click(function() { 
 
    $('#inp').attr('disabled', 'false'); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id='inp' type='text'> 
 
<button id='enb'>Enable</button> 
 
<button id='dis'>Disable</button>

+2

不要用户$()。attr()用户$()。prop()代替。请参阅http://api.jquery.com/prop/ – Lacrioque

回答

6

只是为了扩大对答案...

真正的问题是,你正试图禁用通过setAttribute()设置为false,它不表现为你期待。如果设置了禁用属性,则禁用元素,而不管值 so,disabled="true"disabled="disabled"disabled="false"都是等同的:元素被禁用)。

而应该取出完整属性

$('#enb').click(function() { 
    $('#inp').removeAttr('disabled'); 
}); 
3

只需卸下disabled属性

$('#enb').click(function() { 
    $('#inp').removeAttr('disabled'); 
}); 
+0

这不是一个好习惯。从文档:'不要使用这种方法来删除原生属性,如选中,禁用或选择。' – Selfish

+0

为什么不呢?任何见解@NiaiJ.Perez? – dorado

+0

@anurageldorado,文档提到它可能永久移除prop/attr,不允许重新设置它。 – Selfish

2

您可以使用removeAttr()

$('#dis').click(function() { 
 
    $('#inp').attr('disabled', 'true'); 
 
}); 
 

 
$('#enb').click(function() { 
 
    $('#inp').removeAttr('disabled'); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id='inp' type='text'> 
 
<button id='enb'>Enable</button> 
 
<button id='dis'>Disable</button>

0

尝试

$('#dis').click(function() { 
    $('#inp').attr('disabled', 'true'); 
}); 

$('#enb').click(function() { 
    $('#inp').removeAttr('disabled'); 
}); 

因为disable="disable"等于disable本身

0

有一个办法!您需要删除disabled属性,像这样:

$('#inp').removeAttr('disabled'); 
1

喜试试下面的代码

有布尔值和字符串,而不是“真”之间使用不同的真正 without 报价

$('#dis').click(function() { 
 
    $('#inp').attr('disabled', true); 
 
}); 
 

 
$('#enb').click(function() { 
 
    $('#inp').attr('disabled', false); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id='inp' type='text'> 
 
<button id='enb'>Enable</button> 
 
<button id='dis'>Disable</button>

+1

再一次,attr()方法不适用于布尔值 – Lacrioque

+0

@Lacrioque谁在说? – jlocker

+0

Jquey联机文档:http://api.jquery.com/prop/请参阅属性与属性 – Lacrioque

3

的问题是具有truefalse写在引号你的代码,使他们字符串而非布尔值。请注意,'true''false'都是真值,因此您的代码在两种情况下均将启用值设置为true。

我期待下面会为你工作,检查片段,以及:

$('#dis').click(function() { 
 
    $("#inp").prop('disabled', true); 
 
}); 
 

 
$('#enb').click(function() { 
 
    $("#inp").prop('disabled', false); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id='inp' type='text'> 
 
<button id='enb'>Enable</button> 
 
<button id='dis'>Disable</button>

1
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input id='inp' type='text'> 
<button id='enb'>Enable</button> 
<button id='dis'>Disable</button> 
<script type="text/javascript"> 
    $(document).ready(function() { 

$("#dis").click(function() { 
    $('#inp').prop("disabled", true); 

}); 

$("#enb").click(function() { 
    $('#inp').prop("disabled", false); 
}); 

}); 
</script>