¿Cómo establecer la propiedad de solo lectura en falso en múltiples cuadros de texto con la misma clase?

Tengo los siguientes tres controles que tienen la misma clase llamada “txt11” y quiero cambiar la propiedad de solo lectura de los tres cuadros de texto a falso cada vez que hago clic en el botón editar.

La razón por la que estoy usando la misma clase es que estoy renderizando estos cuadros de entrada dinámicamente en tiempo de ejecución, así que no estoy seguro de cuántos cuadros de texto se mostrarán.

Pero solo el último cuadro de texto está siendo configurado como readonly=false los cuadros de entrada anteriores aún están configurados de solo lectura.

El problema proviene del foco $(".txt11").focus(); que enfocará la última ocurrencia que tiene la clase txt11 , por lo que debe especificar la que desea enfocar, por ejemplo:

 $(".txt11:eq(0)").focus(); //Focusing the first input 

El prop por clase asignará el atributo a todas las entradas.

NOTA: no puede enfocar los campos de readonly , por lo que debe agregar la statement de enfoque después de configurar el valor de readonly en false .

 $(".btn11").click(function(){ $(".txt11").prop("readonly", false); $(".txt11:eq(0)").focus(); }); 
      

FIRST permite la entrada THEN focus – y puedes enfocar solo una entrada.

 $(".btn11").on("click", function() { $(".txt11").prop("readonly", false) // FIRST readonly=false .eq(0).focus(); // THEN focus the first }); 
      

Espero que este JS Fiddle funcione para tu solución

 
Edit $("#editClick").on('click', function(){ $('.test').attr('readonly', false); });

Al hacer clic en el botón o en el evento que requirió, use el siguiente código jquery

 $(".classname").prop("readonly", false);