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

Question

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

为什么当单击相应链路时，文本框没有被启用？

- Micku

Answer 1

id在页面中只能使用一次。您不能有两个元素（或更多）具有相同的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')来获取前面的文本框。

- Joseph

---

@Josehp，这不会影响两个文本区域元素吗？ - Jonas T

@JonasEverest 这就是 div 的目的（保护兄弟元素），但如果不可能使用 div，我已经更新了我的答案。 - Joseph

注意：jQuery确实支持文档中多个相同的“id”。 - Derek 朕會功夫

@Joseph，是的，它是无效的，但jQuery仍然支持它。 - Derek 朕會功夫

Answer 2

您正在重复使用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>

通过这个小的改变，我们现在可以修改 textarea 的 disabled 属性：

$(".edit").on("click", function(e){
  $( "#" + this.id.replace("_link", "") ).prop("disabled", false);
  e.preventDefault();
});

这个选择器不幸地包含了replace()方法的使用。如果您消除了链接和文本框之间ID的歧义，您可以避免使用此方法。

演示：http://jsbin.com/unebur/edit#javascript,html

- Sampson

Answer 3

您正在尝试通过$(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>

- Jonas T

---

这很可能行不通。id 应该是唯一的，每个浏览器对于处理出现多个具有相同 id 的 HTML 页面有不同且未定义的行为。 - jamesmortensen

我的错，没有意识到两个ID具有相同的值。我们可以在这里使用其他东西作为锚点。rel可能是一个选择，并且可以通过.attr("rel")访问吗？ - Jonas T

当然可以！如果您想更加详细，您可以编辑您的答案并展示一个例子。 :) - jamesmortensen

很酷！看起来工作得很好。另外，jsfiddle链接可以作为很好的例子，但是你应该确保编辑你实际的回答并更新其中的代码。如果你的链接失效了，将代码放在回答中可以确保它在未来几年仍对其他用户有价值。再次感谢您的跟进！ - jamesmortensen

Answer 4

您好，请按照以下要求进行一些更改。

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

- Gaurav123

Answer 5

既然这是一个 onclick 处理程序，$(this)将指向您单击的元素，即标记。它没有被禁用。您需要上移 dom 树到父节点，即文本区域，并在那里删除禁用属性:

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

- Marc B

---

嗨，马克，textarea是一个同级元素，而不是父元素。仔细查看他的HTML代码。由于他的HTML格式化方式有点误导人，所以需要更加仔细地观察。 - jamesmortensen

@jmort：啊，是啊，糟糕了。刚刚注意到他的a和textarea元素上也有重复的ID... - Marc B