jQuery テキストボックス読み取り解除

質問

標題について、うまく動作しません。
お手数ですが、ご教授願えたらと思っています。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>

仕様：テキストボックスをクリックしたら、読み取り専用が解除される。
※Ajaxの初期ロード時に各々の項目はreadOnly=true設定

上記が可能なら、その後拡張仕様として、フォーカスアウトした時に
再度 readOnly=trueに設定

html
<table>
<tr>
<td><input type="text" id="code[1]" value="00001"></td>
</tr>
<tr>
<td><input type="text" id="code[2]" value="00002"></td>
</tr>
<tr>
<td><input type="text" id="code[3]" value="00003"></td>
</tr>

jQuery
(function($){
$('input[type="text"]').click(function(){
$(this).attr('readonly','readonly');
});
});

Ajaxの設定は何とかできなのですが、
jQueryの設定がうまくいきません。

どうか宜しくお願い致します。

回答No.2

fujillin · ベストアンサー

回答の前に…

＞仕様：テキストボックスをクリックしたら、読み取り専用が解除される。
って、ほとんど意味を感じられないのですが…
単に、キー操作（タブによるフォーカス）を禁止するようなもので、わざわざ手間をかけてUIを悪くしているように感じます。
「編集対象がない間はreadonlyにしておきたい」という意味であれば、そもそも初期段階には「編集できそうなものがない」状態にしておく方が良いのではないでしょうか。

ってのは置いておいて。

No1様の回答の通り
　removeAttr('readonly');
でも
　attr("readonly", false);
でも、同様の結果になるはずです。（実際の処理内容は少し違いますが）

ご質問文を読むとajaxで内容を読込んでいるみたいですが、イベント設定のタイミングを間違っていることはないでしょうか？
読込み終了前にその対象要素にイベントを設定しようとしても（要素が存在しないので）、当然ながら設定はされません。
コールバックの中で設定するか。liveなどを用いて設定する必要があると思われますが？
タイミングが正しければ、上記に設定でいけるはずと思います。

＞フォーカスアウトした時に再度 readOnly=trueに設定
クリックと同様に、対象要素に　blur(fn)　を設定してあげればよろしいかと。

お礼

お礼が遅れてすみません。

有難う御座いました。
なんとかみなさんの意見で解決できました。

回答No.1

kosukejlampnet

$(this).attr('readonly','readonly');
→$(this).removeAttr('readonly');

補足

ご親切に有難う御座います。
removeAttr()の意味理解させて頂きました。

上記で試したのですが、うまく動作しません
(function($){
alert("jquery");
$('input[type="text"]').click(function(){

とアラート設定をしたのですが、
functionに入ってきていないようです。

何度も申し訳ありませんが、宜しくお願い致します。