チェックボックスで入力や選択の可能・不可能の切り替え

チェックボックスで入力や選択の可能・不可能の切り替えるやり方をご紹介します。

デモ

チェック
入力欄
選択

サンプルコード

JavaScript

var changeDisabled = function(_this, targetN) {
	for (var i = 0, len = targetN.length; i < len; i++) {
		var tN = document.getElementById(targetN[i]);

		if (_this.checked === true) {
			tN.disabled = true;
			tN.style.backgroundColor = '#eee';
		} else {
			tN.disabled = false;
			tN.style.backgroundColor = '#fff';
		}
	}
};

var sampleBtn = document.getElementById('check1');

sampleBtn.onclick = function() {
	// checkdis(チェックボックスID, [切り替えに対応するID, ...]);
	changeDisabled(this, ['q1', 'se1']);
};

HTML

<form action="./" method="get" name="form1" id="form1">
	<table>
		<tr>
			<th>チェック</th>
			<td><input type="checkbox" name="check1" value="0" /></td>
		</tr>
		<tr>
			<th>入力欄</th>
			<td><input type="text" name="q[]" id="q1" value="テスト1です。" /></td>
		</tr>
		<tr>
			<th>選択</th>
			<td>
				<select name="se1" id="se1">
					<option value="1">オプション1</option>
					<option value="2">オプション2</option>
					<option value="3">オプション3</option>
				</select>
			</td>
		</tr>
	</table>
</form>

JavaScript逆引きリファレンス一覧へ戻る