同じクラスの入力ボックスでフォーカスを移動するときにreadonlyを "false"にする方法は？

Question

私は、ユーザーが入力ボックスからフォーカスを外すたびに、読み取り専用モードに切り替える必要があります。しかし、実行時に生成されるテキストボックスはすべて同じクラスを持ち、 ユーザーがそのクラスのテキストボックスを残すまで、これらのテキストボックスは読み取り専用モードにしないことが必要です。しかし、何が起こっているのは、一度に1つのテキストボックスだけがフォーカスを持つことができるので、同じクラスの他のテキストボックスが読み込み専用になることです。

例えば..

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

EDIT：

ユーザーが別のクラス名のテキストボックスをクリックするまで、私は '読み取り専用= false' を失いたくはありません。上記の例では、ユーザーが名前txt11のクラスをクリックしている限り、クラス名txt11のすべてのtexboxのreadonlyプロパティはreadonly = falseでなければなりません。しかし、ユーザーがクラス名txt12のテキストボックスをクリックすると、クラス名がtxt11のすべてのテキストボックスが読み取り専用に設定されます

Answer 1

希望する場合は、このJS Fiddleが解決策として機能します。

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

Answer 2

あなたは、その特定の入力だけで、これは意味がありませんraedonlyモードに

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