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.

Solution 1:

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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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"/>

Focus by group edit :

var last_class = 'txt11';

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

$('body').on('focus', "input:text", function(){
  var current_class = $(this).prop('class');

  if( $(this).prop('readonly') ){
    if(current_class!=last_class){
      $("."+last_class).prop("readonly", true);
      $("."+current_class).prop("readonly", false);
    }
  }

  last_class = current_class;
});

input[readonly]{
    background-color: #EEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input readonly="" name="txtSkill[]" value="database" class="txt10">
<input readonly="" name="txtSkill[]" value="sql" class="txt10">
<input readonly="" name="txtSkill[]" value="mysql" class="txt10">

<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 readonly="" name="txtSkill[]" value="database" class="txt12">
<input readonly="" name="txtSkill[]" value="sql" class="txt12">
<input readonly="" name="txtSkill[]" value="mysql" class="txt12">

<input type="button" value="Edit" name="btnEdit11"id="btnXyz2" class="btn11"/>

Solution 2:

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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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" />

Solution 3:

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);
});

Solution 4:

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

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