以前、ここで紹介した「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を使った方がスクリプトは綺麗になりますが
ブラウザのリロードした際、動作アクションが逆転してしまったり、
おかしな動きを見せたので、ひとまず切り分けて判断させることで回避。

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner