JavaScriptでdisabled属性を利用してinputタグを無効化する
JavaScriptでdisabled属性を利用してinputタグを無効化する方法。
要素を取得し、disabledプロパティにtrueを設定する事でinputタグを無効化(入力不可)にします。(※readonlyと違ってdisabledで無効になったinputタグの値は送信もされません)
また有効にする場合はfalseを設定します。
要素を取得し、disabledプロパティにtrueを設定する事でinputタグを無効化(入力不可)にします。(※readonlyと違ってdisabledで無効になったinputタグの値は送信もされません)
また有効にする場合はfalseを設定します。
jsファイル
/*
* 「登録をしない」にチェックが入っていた場合、registOff関数を呼び出す。
*/
function setUp() {
var objForm = getById('registForm'); //form要素取得
var objRegist = new Array(); //登録する・登録しないのラジオボタン
//inputタグでクラス名がregistの要素を取得
objRegist = getByClass('input','regist');
//登録しないにチェック時
if(objRegist[1].checked) registOff();
}
/*
* 「registForm」内のinputタグを無効化する
*/
function registOff() {
var objForm = getById('registForm');
for(var i=0; i<objForm.length; i++) {
objForm.elements[i].disabled = true;
}
}
/*
* 「registForm」内のinputタグを有効化する
*/
function registOn() {
var objForm = getById('registForm');
for(var i=0; i<objForm.length; i++) {
objForm.elements[i].disabled = false;
}
}
/*
* 指定タグ名の、指定クラス名の要素を配列として取得する
* @param tagName タグ名
* @param className クラス名
* @return 取得要素の配列
*/
function getByClass(tagName,className) {
//指定したタグ名の要素を配列として格納
var tmpList = document.getElementsByTagName(tagName);
var targetList = new Array(); //配列として初期化
//指定タグからクラス名が一致する要素を取得
for(var i=0; i<tmpList.length; i++) {
if(tmpList[i].className == className) {
targetList.push(tmpList[i]); //配列の末尾に格納
}
}
return targetList; //取得結果を配列で返す
}
/*
* 指定したIDの要素を取得する
* @param id 取得したい要素のid
* @return 取得要素
*/
function getById(id) {
return document.getElementById(id);
}
htmlファイル
<body onload="setUp();">
<p>
登録を…
<input type="radio" name="regist" onclick="registOn();" class="regist" />する
<input type="radio" name="regist" onclick="registOff();" class="regist" checked="checked" />しない
</p>
<form id="registForm">
<ul>
<li>名前：<input type="text" name="u_name" /></li>
<li>
性別：
<input type="radio" name="u_sex" value="1" checked="checked" />男
<input type="radio" name="u_sex" value="2" />女
</li>
</ul>
<p><input type="submit" value="送信" /></p>
</form>
</body>
ページ読み込み時にsetUp関数が呼び出され、「登録しない」にチェックが入っていた場合registOff関数が呼び出されます。
「登録する」・「登録しない」のinputタグのラジオボタンや、入力フォームの要素を取得する為にサブルーチンとしてgetByClass関数とgetById関数を呼び出しています。
setUp関数の中で、
//登録しないにチェック時
if(objRegist[1].checked) registOff();
と、わざわざ「登録しない」にチェックが入っていた場合だけregistOff関数を呼び出しているのは、IEやGecko系のブラウザが送信ボタンではなくページの更新ボタン(F5キー)を押した場合に入力データがクリアされず値が保持されるからです。
つまりこの記述がない場合は、IEやGeckoの系ブラウザではcheckedを「登録しない」に設定していても、「登録する」にチェックを付けて更新ボタンを押した場合に送信ボタンを押さない限り「登録する」にチェックが付いたままになってしまいます。
「登録する」にチェックが入ったままなのにinputタグが無効化されてしまうので、今回はブラウザ別の動きも考慮してこういった記述をしています。