チェックボックスで入力や選択の可能・不可能の切り替え
チェックボックスで入力や選択の可能・不可能の切り替えるやり方をご紹介します。
デモ
サンプルコード
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>