「readonlyの解除ができない」 - 地球ウォーカー２

と、この間会社の先輩（JavaScriptは初心者）が嘆いていたので、同じコトで困っている誰かの為にエントリ。

その先輩が書いていたソースはこんな感じ。

<script>
  function f() {
    var t = document.getElementById('text1');
    t.readonly = "false";
  }
</script>
<input type="text" id="text1" value="" readonly />
<input type="button" onclick="f();" value="読取専用解除" />

期待する動作としては「ボタンクリック→読取専用解除」なんだけど、これではうまくいかない。理由は２つ。

その１：readonlyじゃない

HTMLではreadonlyだけど、JavaScriptの場合はreadOnlyというプロパティを使わなければいけない。
だから、

t.readonly = "false";

じゃなくて、

t.readOnly = "false";

こう書かなければいけない。

その２："false"はtrue

JavaScriptでは、文字列が真偽値判定に使われる場合は暗黙の型変換が行われる。
文字列→真偽値の変換ルールは以下の通り。

空文字("")はfalse
それ以外はtrue

ということで、

t.readOnly = "false";

この書き方は、

t.readOnly = true; // "false"は空文字でないためtrueに変換される。

と等価になってしまう。

以上をふまえて

最初のコードはこう書けば期待通りに動作する。

<script>
  function f() {
    var t = document.getElementById('text1');
    t.readOnly = false;
  }
</script>
<body>
<input type="text" id="text1" value="" readonly />
<input type="button" onclick="f();" value="読取専用解除" />
</body>