phpNoob phpNoob - 6 days ago 6
HTML Question

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





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.

Answer

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

Comments