jQueryでINPUTのDisabledを操作してみる【２】

以前、ここで紹介した「jQueryでINPUTのDisabledを操作してみる」。
前回のパターンは一つの入力エリアにテキストを入れると次の入力エリアが入力可能になる、というもの。

ちょっと違うパターンでのDisabled切り替え動作として、
チェックボックスを使って、<INPUT>タグの入力を制御するサンプルを作ってみたので紹介してみます。

まずは動作サンプルから

始めはinput系の入力タグは入力不可になっており、入力させる為のチェックボックスにチェックを入れることで入力することが可能になります。

スクリプトは以下のような感じに。

$(function(){
	$("input#change").each(function(){
		var chk = $(this).attr('checked');
		if(chk == true){
			$("table#change_list input,table#change_list textarea").attr('disabled','');
		}else{
			$("table#change_list input,table#change_list textarea").attr('disabled','disabled');
		}
		return true;
	});
	$("input#change").click(function(){
		var chk = $(this).attr('checked');
		if(chk == true){
			$("table#change_list input,table#change_list textarea").attr('disabled','');
		}else{
			$("table#change_list input,table#change_list textarea").attr('disabled','disabled');
		}
		return true;
	});
});

上記スクリプトでのHTMLソースは以下のような感じになります。

<p><input type="checkbox" name="edit_flg" value="" class="checkbox" id="change" />入力する</p>
<table id="change_list">
<tr>
<th>入力１</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>入力２</th>
<td><input type="radio" name="test" value="" checked="checked" />A　<input type="radio" name="test" value="" />B</td>
</tr>
<tr>
<th>入力３</th>
<td><input type="checkbox" name="test" value="" checked="checked" />A　<input type="checkbox" name="test" value="" />B</td>
</tr>
<tr>
<th>入力４</th>
<td><textarea value="" style="width:250px"></textarea></td>
</tr>
</table>

.each function でページロード時のチェックボックスの状態をみてDisabledを付けるか付けないか判断させ、チェックボックスに対しての .click function でチェックされる毎の切り替えを制御しています。

.bind functionのloadやclickを使った方がスクリプトは綺麗になりますが、ブラウザのリロードした際、動作アクションが逆転してしまったり、おかしな動きを見せたので、ひとまず切り分けて判断させることで回避。

会員サイトの情報などでユーザーの任意の操作で変更を可否させるような動作に使えるかなと思います。

サイト内でこの様な動作が必要になった際に是非。。。