javascript - How to set readonly property to false on multiple textboxes with same class? - Stack Overflow

admin管理员组

文章数量:1431435

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=".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"/>

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="https://ajax.googleapis./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"/>

The reason why I am using same class is that I am rendering these input boxes dynamically at run time so I am not sure how many textboxes will be rendered.

But only the last textbox is being set to readonly=false the above input boxes are still set readonly.

• javascript
• jquery
• html
• dynamic

Share Improve this question Follow edited Nov 29, 2016 at 10:59 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Nov 29, 2016 at 10:42 phpNoobphpNoob 24911 gold badge77 silver badges2020 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

The problem e 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./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./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"/>

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./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" />

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

本文标签： javascriptHow to set readonly property to false on multiple textboxes with same classStack Overflow