Come rimuovere l'attributo disabilitato di una textarea usando jQuery?

Question

Ho più textareas nel mio modulo HTML seguito da un collegamento di modifica per ciascuno. Quando clicco su un link di modifica , la textarea corrispondente deve essere abilitata. Il mio codice è il seguente:

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

Perché textarea non essere abilitata quando il link corrispondente viene cliccato?

Answer 1

id s può essere utilizzato solo una volta in una pagina. non puoi avere 2 elementi (o più) aventi lo stesso id.

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

se non è possibile utilizzare div, quindi è possibile utilizzare prev('textarea') invece di siblings('textarea') per ottenere textarea precedente.

Answer 2

Poiché questo è un gestore onclick, $ (questo) punta all'elemento su cui si è fatto clic, ovvero il tag <a>. Questo non ha disabilitato. È necessario spostare l'albero DOM per il nodo principale, which'd essere la textarea, e rimuovere l'attributo disabled c'è:

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

Answer 3

Stai riutilizzando i valori ID: questo è un grande no-no. Se hai intenzione di fornire questi ID, devi fare qualcosa per differenziare il collegamento txt1 dalla textarea txt1. Nel codice qui sotto, ho aggiunto un suffisso _link ai collegamenti.

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

Con questo piccolo cambiamento, ora possiamo modificare la proprietà disabile del textarea:

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

Il selettore, purtroppo, comprende un uso del metodo replace(). Se rimuovi l'ambiguità degli ID tra i link e le textareas, puoi farla finita.

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

Answer 4

Si sta tentando di rimuovere attributo disabled del tag di ancoraggio di $ (questo). Prova questo.

<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

Ciao si prega di fare alcune modifiche come indicato di seguito

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