javascript 如何使用 jQuery 删除 textarea 的禁用属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10527638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove disabled attribute of a textarea using jQuery?
提问by Micku
I have multiple textareas in my HTML form followed by an edit link for each. When I click an edit link, the corresponding textarea should be enabled. My code is as follows:
我的 HTML 表单中有多个文本区域，每个文本区域后跟一个编辑链接。当我单击编辑链接时，应启用相应的文本区域。我的代码如下：
<script type="text/javascript">
$(document).ready(function() {
$(".edit").click(function(){
$(this).attr("id").removeAttr("disabled");
});
});
</script>
<textarea id="txt1" disabled="true"></textarea>
<a class="edit" id="txt1" >edit</a>
<textarea id="txt2" disabled="true"></textarea>
<a class="edit" id="txt2" >edit</a>
Why is the textarea not being enabled when the corresponding link is clicked?
为什么点击相应链接时textarea没有被启用？
回答by Joseph
ids can only be used once in a page. you can't have 2 elements (or more) having the same id.
ids 只能在一个页面中使用一次。您不能有 2 个（或更多）具有相同 ID 的元素。
instead, do this:
相反，这样做：
<form id="myform">
<!-- group each in divs -->
<div>
<textarea disabled="true"></textarea>
<a class="edit">edit</a>
</div>
<div>
<textarea disabled="true"></textarea>
<a class="edit">edit</a>
</div>
</form>
<script>
$(function(){
$('#myform').on('click','.edit',function(){
$(this) //when edit is clicked
.siblings('textarea') //find it's pair textarea
.prop("disabled", false) //and enable
return false;
});
});
</script>
if you can't use divs, then you can use prev('textarea')instead of siblings('textarea')to get the preceding textarea.
如果你不能使用div，那么你可以使用prev('textarea')代替siblings('textarea')来获取前面的textarea。
回答by Sampson
You're re-using ID values - this is a big no-no. If you're going to give these an ID, you need to do something to differentiate the txt1link from the txt1textarea. In the code below, I've added a _linksuffix to the links.
您正在重复使用 ID 值 - 这是一个很大的禁忌。如果你打算给这些一个 ID，你需要做一些事情来区分txt1链接和txt1文本区域。在下面的代码中，我_link为链接添加了后缀。
<textarea id="txt1" disabled="true"></textarea>
<a class="edit" id="txt1_link">edit</a>
<textarea id="txt2" disabled="true"></textarea>
<a class="edit" id="txt2_link">edit</a>
With that small change, we can now modify the disabled property of the textarea:
通过这个小改动，我们现在可以修改 textarea 的 disabled 属性：
$(".edit").on("click", function(e){
$( "#" + this.id.replace("_link", "") ).prop("disabled", false);
e.preventDefault();
});
The selector, unfortunately, includes a use of the replace()method. If you remove the ambiguity in ID's between the links and the textareas, you can do away with this.
不幸的是，选择器包含了对replace()方法的使用。如果您消除了链接和文本区域之间 ID 的歧义，您就可以消除这一点。
回答by Jonas T
You are trying to remove disabled attribute of anchor tag by $(this). Try this.
您正在尝试通过 $(this) 删除锚标记的禁用属性。试试这个。
<script type="text/javascript">
$(document).ready(function() {
$(".edit").click(function(){
$("#"+$(this).attr("rel")).removeAttr("disabled");
});
});
</script>
<textarea id="txt1" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt1" >edit</a>
<textarea id="txt2" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt2" >edit</a>
回答by Gaurav123
Hello please make some changes as mentioned below
您好，请按以下所述进行一些更改
<script type="text/javascript">
$(document).ready(function () {
$('.txtAreas').attr('disabled', true);
$("#txt3").click(function () {
$('#txt1').removeAttr("disabled");
});
$("#txt4").click(function () {
$('#txt2').removeAttr("disabled");
});
});
</script>
<textarea id="txt1" class="txtAreas"></textarea><a href="#" class="edit" id="txt3">edit</a>
<textarea id="txt2" class="txtAreas"></textarea><a href="#" class="edit" id="txt4">edit</a>
回答by Marc B
Since that's an onclick handler, $(this) is going to point at the element you clicked on, which is the <a>tag. That doesn't have a disabled. You need to move up the dom tree to the parent node, which'd be the textarea, and remove the disabled attribute there:
由于这是一个 onclick 处理程序， $(this) 将指向您单击的元素，即<a>标签。那没有残疾人。您需要将 dom 树向上移动到父节点，即 textarea，并删除那里的 disabled 属性：
$(this).parent().removeAttr("disabled");
