jquery.js｜フォームの操作(1)

選択した項目の値によって、別項目の初期値を切り替えたり、使用可・不可を切り替えたりする。

属性の設定は「.attr」を使うんだけど、「.attr("disabled", "true")」って書いてる場所は「.attr("disabled", "disabled")」でもいいみたい。
prototype.jsの方は.disabled=true/falseで設定してたから、比較と言う意味合いで前者の書き方を採用してます。
なんとなくですが、この程度のフォームの操作だと、prototype.jsの方が（自分としては）使いやすいような気も…？

- HTML

<form action="#">
<p class="txt">選択項目1で選んだ項目によって、選択項目2の使用可否が変わる</p>
選択項目1
<select id="sel01" onchange="SetSelectItem();">
	<option value="item01_1">選択項目2使用可</option>
	<option value="item01_2" selected>選択項目2使用不可：初期選択項目</option>
	<option value="item01_3">選択項目2使用可</option>
	<option value="item01_4">選択項目2使用可</option>
	<option value="item01_5">選択項目2使用不可</option>
</select>
<br>
選択項目2
<select id="sel02">
	<option value="item02_1">項目01</option>
	<option value="item02_2">項目02</option>
	<option value="item02_3">項目03</option>
</select>
<br><br>
<p class="txt">オプション1で選んだ項目によって、オプション2の選択できる項目が変わる<br>
（桃の場合PEACH、林檎の場合APPLE/GREEN APPLEのみ選択可能）<br>
初期状態→オプション1＝林檎　オプション2＝GREEN APPLEが選択</p>
オプション1<br>
<input type="radio" name="radio01" id="radio01_1" onclick="SetRadioItem();"><label for="radio01_1" id="label01_1">桃</label>
<input type="radio" name="radio01" id="radio01_2" onclick="SetRadioItem();" checked><label for="radio01_2" id="label01_2">林檎</label>
<br>
オプション2<br>
<input type="radio" name="radio02" id="radio02_1"><label for="radio02_1" id="label02_1">PEACH</label>
<input type="radio" name="radio02" id="radio02_2"><label for="radio02_2" id="label02_2">APPLE</label>
<input type="radio" name="radio02" id="radio02_3" checked><label for="radio02_3" id="label02_3">GREEN APPLE</label>

</form>

- JavaScript

// フォームの操作：初期値設定
function DefaultSet(){
	// Select設定
	SetSelectItem();
	// Option設定
	SetRadioItem();
}

// Select onChangeイベント用
function SetSelectItem(){
	// SELECT(ID="sel01")で選択されている値によってフォームの設定を変更
	switch ( $("#sel01").val() ){
		case "item01_2":
		case "item01_5":
			// 使用不可にする
			$("#sel02").attr("disabled", "true");
			break;

// デフォルト
		default:
			// 使用可にする
			$("#sel02").removeAttr("disabled");
	}
}

// Radio onClickイベント用
function SetRadioItem(){

// ＜テストここから＞--------------------------------------------
	// name=radio01の項目でチェックされているもののIDを取得する
	// 取得したID（chkOptID）の値が何か、でIF文を構築するのもアリ。
	// 比較対象の方と構文構成が変わっちゃうので使わないけど…。
	var chkOptID = $("[name=radio01]:checked").attr("id");
	//alert("チェックされている項目のID："+chkOptID);
	// ＜テストここまで＞--------------------------------------------

// RADIO(ID="radio01_1"：桃)がチェックされている場合
	if ($("#radio01_1").attr("checked")){
		// PEACH：使用可に
		$("#radio02_1").removeAttr("disabled");
		// APPLE・GREEN APPLE：使用不可に
		$("#radio02_2,#radio02_3").each(function(){
			$(this).attr("disabled", "true");
			// APPLE・GREEN APPLEがチェック済みなら、桃にチェックを移動
			if ($(this).attr("checked")){
				$("#radio02_1").attr("checked", "true");
			}
		});
		// ラベルの色を設定：disableTextを設定すると文字がグレーに
		$("#label02_1").removeClass("disableText");
		$("#label02_2,#label02_3").each(function(){
			$(this).addClass("disableText");
		});
	
	} else {
	// そうではない場合（＝林檎の方がチェック）
		// PEACH：使用不可に
		$("#radio02_1").attr("disabled", "true");
		// PEACHがチェック済みなら、APPLEにチェックを移動
		if ($("#radio02_1").attr("checked")){
			$("#radio02_2").attr("checked", "true");
		}
		// APPLE・GREEN APPLE：使用可に
		$("#radio02_2,#radio02_3").each(function(){
			$(this).removeAttr("disabled");
		});
		// ラベルの色を設定：disableTextを設定すると文字がグレーに
		$("#label02_1").addClass("disableText");
		$("#label02_2,#label02_3").each(function(){
			$(this).removeClass("disableText");
		});
	}
}

// -->

</script>

- CSS

jquery.js vを使って…

2. フォームの操作(1)　（→prototype.js版）

jquery.js vdocument.write(jQuery.fn.jquery);を使って…

2. フォームの操作(1) （→prototype.js版）

jquery.js vを使って…

2. フォームの操作(1)　（→prototype.js版）