How to set readonly property to false on multiple textboxes with same class?

I have the following three controls which all have same class named "txt11" and I want to change the readonly property of all three textboxes to false whenever I click edit button.

$(".btn11").click(function(){
  $(".txt11").focus();
  $(".txt11").prop("readonly", false);
});
<script src=""></script>
<input readonly="" name="txtSkill[]" value="database" class="txt11">
<input readonly="" name="txtSkill[]" value="sql" class="txt11">
<input readonly="" name="txtSkill[]" value="mysql" class="txt11">
<input type="button" value="Edit" name="btnEdit11"id="btnXyz2" class="btn11"/>


ANSWERS:


The problem come from the focus $(".txt11").focus(); that will focus the last occurrence that have the class txt11, so you should specify the one you want to focus, e.g :

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

The prop by class will assign the attribute to all inputs.

NOTE : you can't focus the readonly fields, so you should add the focus statement after setting the readonly to false.

$(".btn11").click(function(){
    $(".txt11").prop("readonly", false);
    $(".txt11:eq(0)").focus();
});
<script src=""></script>
<input readonly="" name="txtSkill[]" value="database" class="txt11">
<input readonly="" name="txtSkill[]" value="sql" class="txt11">
<input readonly="" name="txtSkill[]" value="mysql" class="txt11">
<input type="button" value="Edit" name="btnEdit11"id="btnXyz2" class="btn11"/>

FIRST allow input THEN focus - and you can focus only one input.

$(".btn11").on("click", function() {
  $(".txt11").prop("readonly", false) // FIRST readonly=false
    .eq(0).focus(); // THEN focus the first
});
<script src=""></script>
<input readonly="readonly" name="txtSkill[]" value="database" class="txt11">
<input readonly="readonly" name="txtSkill[]" value="sql" class="txt11">
<input readonly="readonly" name="txtSkill[]" value="mysql" class="txt11">
<input type="button" value="Edit" name="btnEdit11" id="btnXyz2" class="btn11" />

Hope this JS Fiddle works for your solution

<input type="text" readonly="true" value="123" class="test" id="test"  /><br />
<input class="test" readonly="true" type="text" value="123" />
<buton id="editClick">
 Edit
</button>

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

On click of the button or the event you required use the following jquery code

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


 MORE:


 ? How to set readonly property to false on multiple textboxes with same class?
 ? How to set readonly property of dynamic textbox using jQuery?
 ? Textbox becomes readonly on postback even when setting the readonly attribute to false manually
 ? How to remove multiple dynamically generated elements at the same time by their class name?
 ? set readonly property to false for an html text input on clicking on Edit
 ? How to keep readonly="false" for input boxes with same class when moving focus between them?
 ? Does std::vector behave different for clearing or deleting PODs
 ? Does std::vector behave different for clearing or deleting PODs
 ? Does std::vector behave different for clearing or deleting PODs
 ? Why is there not an std::is_struct type trait?