How to remove disabled attribute of a textarea using jQuery?

html, javascript, jquery

Solution

`id`s can only be used once in a page. you can't have 2 elements (or more) having the same id.

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

if you can't use divs, then you can use `prev('textarea')` instead of `siblings('textarea')` to get the preceding textarea.

Problem

I have multiple textareas in my HTML form followed by an edit link for each. When I click an edit link, the corresponding textarea should be enabled. 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 textarea not being enabled when the corresponding link is clicked?

Original source