Wie deaktiviertes Attribut einer Textarea mit jQuery entfernen?

Question

Ich habe mehrere Textareas in meinem HTML-Formular gefolgt von einem Bearbeitungslink für jeden. Wenn ich auf einen Bearbeitungslink von klicke, sollte das entsprechende Textfeld aktiviert sein. Mein Code lautet wie folgt:

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

Warum wird die Textfläche nicht aktiviert, wenn auf die entsprechende Verknüpfung geklickt wird?

Answer 1

id s kann nur einmal in einer Seite verwendet werden. Sie können nicht 2 Elemente (oder mehr) mit derselben ID haben.

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

wenn Sie nicht divs verwenden können, dann können Sie prev('textarea') statt siblings('textarea') verwenden, um die vorhergehenden Textarea zu erhalten.

Answer 2

Da dies ein onclick-Handler ist, wird $ (this) auf das Element zeigen, auf das Sie geklickt haben, nämlich das <a>-Tag. Das hat kein Behindertes. Sie müssen den DOM-Baum zu den übergeordneten Knoten nach oben, which'd das Textfeld sein, und entfernen Sie das disabled-Attribut gibt:

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

Answer 3

Sie verwenden ID-Werte erneut - dies ist ein großes Nein-Nein. Wenn Sie diesen eine ID geben, müssen Sie etwas tun, um die txt1 Verbindung von der txt1 Textarea zu unterscheiden. Im folgenden Code habe ich den Links ein _link Suffix hinzugefügt.

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

Mit dieser kleinen Änderung können wir nun die deaktivierte Eigenschaft des Textbereiches ändern:

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

Der Selektor schließt leider eine Verwendung der replace() Methode. Wenn Sie die Mehrdeutigkeit in IDs zwischen den Links und den Textareas entfernen, können Sie dies beseitigen.

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

Answer 4

Sie versuchen, von $ (this) deaktiviert Attribut des Anker-Tag zu entfernen. Versuche dies.

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

Hallo bitte einige Änderungen vornehmen, wie unten erwähnt

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