WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

以前、ここで紹介した「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>入力1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>入力2</th>
<td><input type="radio" name="test" value="" checked="checked" />A <input type="radio" name="test" value="" />B</td>
</tr>
<tr>
<th>入力3</th>
<td><input type="checkbox" name="test" value="" checked="checked" />A <input type="checkbox" name="test" value="" />B</td>
</tr>
<tr>
<th>入力4</th>
<td><textarea value="" style="width:250px"></textarea></td>
</tr>
</table>

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です