Geek asks and answers

How to remove a disabled textarea attribute using jQuery?

I have several text fields in my HTML form, followed by a link for editing. When I click edit the link, the corresponding text area should be included. My code is as follows:

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

Why is the text field not activated when the corresponding link is clicked?

+5
source share
5 answers

idcan only be used once per page. you cannot have 2 elements (or more) having the same identifier.

instead, 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 pair textarea
                .prop("disabled", false)  //and enable
            return false;
        });
    });
</script>

if you cannot use divs, you can use prev('textarea')instead siblings('textarea')to get the previous text field.

+6

- -. , -, 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:

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

, , replace(). ID , .

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

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

, , , .

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

Since this is an onclick handler, $ (this) will point to the element you clicked on, which is a tag <a>. This one has no disconnected. You need to move the dom tree to the parent node, which would be textarea and remove the disabled attribute there:

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

More articles:


All Articles