Javascript 如何使用jQuery删除textarea的禁用属性？

我的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>

$（文档）.ready（函数（）{
$（“.edit”）。单击（函数（）{
$（this.attr（“id”）.removeAttr（“禁用”）；
});
});  
编辑
编辑

---

为什么单击相应链接时未启用textarea？

因为这是一个onclick处理程序，$（此）将指向您单击的元素，即

标记。那没有残疾人。您需要将dom树向上移动到父节点，即textarea，并删除其中的禁用属性：

  $(this).parent().removeAttr("disabled");

---

id

s一页只能使用一次。不能有两个（或更多）具有相同id的元素

而是：

编辑
编辑
$（函数（）{
$（'#myform'）。在（'click'，'.edit'，function（）{
$（此）//单击编辑时
.sides（'textarea'）//查找它的配对textarea
.prop（“禁用”，false）//并启用
返回false；
});
});

---

如果你不能使用div，那么你可以使用

prev（'textarea'）

而不是

兄弟（'textarea'）

来获取前面的textarea。

你使用的是ID值，这是一个很大的禁忌。如果你要给它们一个ID，你需要做一些事情来区分

txt1

链接和

txt1

textarea。在下面的代码中，我为链接添加了一个

\u 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>

不幸的是，选择器使用了

replace（）

方法。如果您消除了链接和文本区域之间ID的模糊性，就可以消除这种情况

---

演示：

您正试图通过$删除锚点标记的禁用属性（此）。试试这个

<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>

$（文档）.ready（函数（）{
$（“.edit”）。单击（函数（）{
$（“#”+$（this.attr（“rel”））.removeAttr（“禁用”）；
});
});  
编辑
编辑

您好，请按以下所述进行一些更改

 <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>

$（文档）.ready（函数（）{
$（'.txtAreas'）.attr（'disabled'，true）；
$（“#txt3”）。单击（函数（）{
$（'#txt1'）.removeAttr（“禁用”）；
});
$（“#txt4”）。单击（函数（）{
$（'#txt2'）.removeAttr（“禁用”）；
});
});

@Josehp，这不会影响两个textarea元素吗？@JonasEverest这是

div

s（保护兄弟姐妹）的目的，但是如果

div

s不可能，我会更新我的答案。注意：jQuery在一个文档中支持多个相同的

id

。@Joseph，是的，它是无效的，但是jQuery仍然支持它，这很可能行不通。id应该是唯一的，每个浏览器都有不同的、未定义的行为来处理HTML页面，其中有多个特定id的实例。没有意识到两个id都是相同的值。我们可以用别的东西作为锚。rel是可能的，并且可以通过.attr（“rel”）访问？绝对可以！如果您想彻底了解，您可以编辑答案中的HTML并显示一个示例。：）很酷！看起来效果不错。顺便说一句，jsfiddle链接是一个很好的例子，但是您应该确保编辑您的实际答案，并用代码对其进行更新。如果你的链接曾经消失，在你的答案中包含代码可以确保它在几年后对其他用户仍然有价值。再次感谢您的关注！嗨，Marc，textarea是兄弟姐妹，不是父母。仔细看看他的HTML。这有点误导，因为他用HTML格式化的方式。@jmort:啊，是的，phooey。刚刚注意到他在a和textarea元素上也有重复的ID。。。

<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>