Cómo quitar el atributo deshabilitado de un área de texto usando jQuery?

Question

Tengo múltiples textareas en mi formulario HTML seguido de un enlace de edición para cada una. Cuando hago clic en un enlace de edición , se debe habilitar el área de texto correspondiente. Mi código es el siguiente:

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

¿Por qué no se está habilitando el área de texto cuando se hace clic en el enlace correspondiente?

Answer 1

id s sólo pueden usarse una vez en una página. no puedes tener 2 elementos (o más) que tengan la misma identificación.

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

si no se puede utilizar divs, entonces se puede utilizar en lugar de prev('textarea')siblings('textarea') para obtener el área de texto anterior.

Answer 2

Dado que se trata de un controlador onclick, $ (esto) apuntará al elemento en el que hizo clic, que es la etiqueta <a>. Eso no tiene una discapacidad. Es necesario mover el árbol DOM al nodo padre, which'd ser el área de texto, y quitar el atributo disabled allí:

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

Answer 3

Está reutilizando valores de ID: este es un gran no-no. Si va a darles una ID, debe hacer algo para diferenciar el enlace txt1 del área de texto txt1. En el siguiente código, he agregado un sufijo _link a los enlaces.

<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 ese pequeño cambio, ahora podemos modificar la propiedad discapacitados del área de texto:

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

El selector, por desgracia, incluye un uso del método replace(). Si elimina la ambigüedad en las ID entre los enlaces y las áreas de texto, puede eliminar esto.

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

Answer 4

Usted está tratando de eliminar el atributo de etiqueta de anclaje discapacitados por $ (este). Prueba esto.

<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

Hola por favor haga algunos cambios como se menciona a continuación

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