Question

我的HTML表单中有多个textareas，后面跟着每个文本的编辑链接。当我点击一个编辑链接，应启用相应的textarea。我的代码如下：

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

为什么单击相应的链接时没有启用textarea？

Answer 1

id只能在页面中使用一次。你不能拥有2个具有相同身份的元素（或更多）。

而是，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>

如果您不能使用div，那么您可以使用prev('textarea')代替siblings('textarea')来获取前面的textarea。

Answer 2

你正在重新使用ID值 - 这是一个很大的禁忌。如果您要提供这些ID，则需要执行一些操作以区分txt1链接与txt1 textarea。在下面的代码中，我为链接添加了_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的禁用属性：

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

遗憾的是，选择器包含replace()方法的使用。如果你删除链接和textareas之间ID的歧义，你就可以废除它。

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

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>

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>

Answer 5

由于这是一个onclick处理程序，$（this）将指向您单击的元素，即<a>标记。那没有残疾人。您需要将dom树向上移动到父节点（即textarea），并在那里删除disabled属性：

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

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

5 个答案: