我的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>
为什么单击相应链接时未启用文本区域?
id
s 在一个页面中只能使用一次。 不能有 2 个(或更多)元素具有相同的 ID。
相反,请执行此操作:
<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>
如果不能使用div,则可以使用 prev('textarea')
而不是 siblings('textarea')
来获取前面的文本区域。
您正在重复使用 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>
通过这个小的更改,我们现在可以修改文本区域的禁用属性:
$(".edit").on("click", function(e){
$( "#" + this.id.replace("_link", "") ).prop("disabled", false);
e.preventDefault();
});
不幸的是,选择器包括对replace()
方法的使用。如果您删除链接和文本区域之间 ID 中的歧义,则可以消除这种情况。
演示:http://jsbin.com/unebur/edit#javascript,html
您正在尝试通过 $(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>
您好,请进行如下所述的一些更改
<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>
由于这是一个 onclick 处理程序,$(this) 将指向您单击的元素,即 <a>
标记。那没有禁用。您需要将 dom 树向上移动到父节点,即文本区域,并删除那里的禁用属性:
$(this).parent().removeAttr("disabled");