在输入框之间移动焦点时，如何保持相同类的输入框的只读= "false"？

Question

我希望每当用户从输入框中焦点焦点时，都应该变成可读取模式。但是我有在运行时生成的文本框，他们都有相同的类用户离开该类的文本框。但是，发生的事情是，只有一个文本框一次可以焦点，因此同一类的其他文本框最终会被阅读。

例如

<span id="file_div">
<?php foreach($arr as $skill) 
    {echo '<input readonly name="txtSkill[]" value="'.$skill.'" class="txt11"/>'; }?>
</span>
<input type="button" value="Edit" name="btnEdit11"id="btnXyz2" class="btn11"/>
<input readonly name="txtQualif" value="<?= $row[15];?>" class="txt12"/>
<input type="button" value="Edit" name="btnEdit12"id="btnXyz2" class="btn12"/>
<script>
$(".btn11").click(function(){
    $(".txt11").eq(0).focus(); // focus the first
    $(".txt11").prop("readonly", false);
});
$(".btn12").click(function(){
    $(".txt12").focus();
    $(".txt12").prop("readonly", false);
});
$(".txt11").focusout(function(){
    $(".txt11").prop("readonly", true);
});
$(".txt12").focusout(function(){
    $(".txt12").prop("readonly", true);
});
</script>

编辑：

我不想失去'ReadOnly = false'，直到用户单击不同类名称的文本框。在上面的例如。只要用户在name txt11的类之间单击，所有带有类名称txt11的Texbox的读取属性就应该读取= false。但是，如果用户单击带有类名称的文本框，则所有带有类名称txt11的文本框将设置为readonly

Answer 1

您需要为每个文本输入字段定义焦点，因此，无论何时焦点都将其更改为raedonly mode

$(".txt11").each(function(){
    $(this).focusout(function(){
          $(this).prop("readonly", true);
    });
});

Answer 2

希望这个JS小提琴为您提供解决方案。

<input type="text" readonly="true" value="123" class="test" id="test"  /><br />
<input class="test" readonly="true" type="text" value="123" />
<button id="editClick">
 Edit
</button>
$("#editClick").on('click', function(){
 $('.test').attr('readonly', false);
});