Javascript TIPS No.11 インプットボックス・テキストエリア(input,textarea)の入力可否を操作する「disabled」

  • Javascriptでインプットボックス・テキストエリアの入力可否を操作します

文法

document.getElementById(オブジェクトのID).disabled = trueまたはfalse;

サンプルコード

<html lang="ja-JP">
<head>
<title>テキストボックス・テキストエリアの入力可否を操作する</title>
<script type="text/javascript">
function Dture(objId){
document.getElementById(objId).disabled = true;
}

function Dfalse(objId){
document.getElementById(objId).disabled = false;
}
</script>
</head> 
<body> 
<p>
<input type="button" value="入力可能にする" onClick="Dfalse('hoge1');">
<input type="button" value="入力不可にする" onClick="Dture('hoge1');">
</p>
<p>
<input id="hoge1" type="text" value="ほげほげほげ" style="width:300px;">
</p>
<p>
<input type="button" value="入力可能にする" onClick="Dfalse('hoge2');">
<input type="button" value="入力不可にする" onClick="Dture('hoge2');">
</p>
<p><textarea id="hoge2">
ほげほげほげ
ほげほげほげ
ほげほげほげ
</textarea></p>
</body> 
</html> 

サンプルを見る

解説

関数の呼び出し

  • 操作対象のID(hoge1)を引数で渡し、関数Dfalseを呼び出しています
<input type="button" value="入力可能にする" onClick="Dfalse('hoge1');">
</html> 

入力可能にする

  • 対象のID(hoge1)をもつオブジェクトのdisabled(入力可否)をfalse(入力可)にします
function Dfalse(objId){
document.getElementById(objId).disabled = false;
}