5

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

为什么单击相应链接时没有启用文本区域？

4

5 回答 5

6

ids 在一个页面中只能使用一次。您不能有 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')来获取前面的 textarea。

于 2012-05-10T04:51:34.217 回答
3

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

于 2012-05-10T04:52:19.520 回答
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>
于 2012-05-10T04:53:45.427 回答
1

您好，请按照以下说明进行一些更改

 <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>
于 2012-05-10T05:11:31.340 回答
0

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

  $(this).parent().removeAttr("disabled");
于 2012-05-10T04:49:06.430 回答