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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputreadonly=""name="txtSkill[]"value="database"class="txt11"><inputreadonly=""name="txtSkill[]"value="sql"class="txt11"><inputreadonly=""name="txtSkill[]"value="mysql"class="txt11"><inputtype="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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputreadonly=""name="txtSkill[]"value="database"class="txt10"><inputreadonly=""name="txtSkill[]"value="sql"class="txt10"><inputreadonly=""name="txtSkill[]"value="mysql"class="txt10"><inputreadonly=""name="txtSkill[]"value="database"class="txt11"><inputreadonly=""name="txtSkill[]"value="sql"class="txt11"><inputreadonly=""name="txtSkill[]"value="mysql"class="txt11"><inputreadonly=""name="txtSkill[]"value="database"class="txt12"><inputreadonly=""name="txtSkill[]"value="sql"class="txt12"><inputreadonly=""name="txtSkill[]"value="mysql"class="txt12"><inputtype="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
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><inputreadonly="readonly"name="txtSkill[]"value="database"class="txt11"><inputreadonly="readonly"name="txtSkill[]"value="sql"class="txt11"><inputreadonly="readonly"name="txtSkill[]"value="mysql"class="txt11"><inputtype="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 /><inputclass="test"readonly="true"type="text"value="123" /><butonid="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);