チェックに応じて違うチェックボックスをアクティブにしたい

解決済

質問者：litton101
質問日時：2005/07/12 10:56
回答数：2件

次のHTMLのように、大分類、小分類のような構成のチェックボックス
グループがあります（初期設定は全部チェック無しです）

普段は[a][b][c][d]をdisableとしておき、(1) にチェックが入った
場合に[d]以外（[a][b][c]）アクティブ（？とにかくチェックを入れる
ことができる）ようにするにはどうしたらいいでしょうか。
よろしくお願い致します。

<form id="Form1">
:
<INPUT TYPE="CHECKBOX" NAME="food" value="果物">(1) 果物
<INPUT TYPE="CHECKBOX" NAME="food" value="野菜">(2) 野菜
<INPUT TYPE="CHECKBOX" NAME="food" value="肉魚">(3) 肉魚
<br>
<INPUT TYPE="CHECKBOX" NAME="fruit" value="りんご">[a] りんご
<INPUT TYPE="CHECKBOX" NAME="fruit" value="みかん">[b] みかん
<INPUT TYPE="CHECKBOX" NAME="fruit" value="ぶどう">[c] ぶどう
<INPUT TYPE="CHECKBOX" NAME="fruit" value="バナナ">[d] バナナ
:
</form>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： EUR
回答日時：2005/07/12 11:55

javascriptにて、果物、野菜、魚肉のリストを作り、disabledを変更しています。

注意ですが、リストを作る際に、取得したエレメントが1つしかなかった場合、リストのlenghtはundifinedになってしまいます。
これを避けるために、リストを生成し、disabledを変更するときに、場合わけとして、
１．if (FruitLists && FruitList.length)
リストに要素があり、かつlengthが取得できる（リストが2以上）
２．else if (FruitLists)
1ではないが、リストに要素がある（要素数が１）
を行っています。

以下ソースです。
<HTML>
<head>
<script language="javascript">
function checkFood(kind, FoodForm) {
　　FruitLists = document.forms("Form1").elements("fruit");
　　VegetableLists = document.forms("Form1").elements("vegetable");
　　MeatLists = document.forms("Form1").elements("meat");
　　
　　switch (kind) {
　　case "fruit":
　　　　if (FoodForm.checked == true) {
　　　　　　//フルーツをチェック可能に
　　　　　　if (FruitLists && FruitLists.length) {
　　　　　　　　for (i = 0; i < FruitLists.length; i++) {
　　　　　　　　　　FruitLists[i].disabled = false;
　　　　　　　　}
　　　　　　} else if (FruitLists) {
　　　　　　　　FruitLists.disabled = false;
　　　　　　} else {
　　　　　　}
　　　　} else {
　　　　　　//フルーツをチェック不可能に
　　　　　　if (FruitLists && FruitLists.length) {
　　　　　　　　for (i = 0; i < FruitLists.length; i++) {
　　　　　　　　　　FruitLists[i].disabled = true;
　　　　　　　　}
　　　　　　} else if (FruitLists) {
　　　　　　　　FruitLists.disabled = true;
　　　　　　} else {
　　　　　　}
　　　　}
　　break;
　　case "vegetable":
　　　　if (FoodForm.checked == true) {
　　　　　　//野菜をチェック可能に
　　　　　　if (VegetableLists && VegetableLists.length > 1) {
　　　　　　　　for (i = 0; i < VegetableLists.length; i++) {
　　　　　　　　　　VegetableLists[i].disabled = false;
　　　　　　　　}
　　　　　　} else if (VegetableLists) {
　　　　　　　　VegetableLists.disabled = false;
　　　　　　} else {
　　　　　　}
　　　　} else {
　　　　　　//野菜をチェック不可能に
　　　　　　if (VegetableLists && VegetableLists.length > 1) {
　　　　　　　　for (i = 0; i < VegetableLists.length; i++) {
　　　　　　　　　　VegetableLists[i].disabled = true;
　　　　　　　　}
　　　　　　} else if (VegetableLists) {
　　　　　　　　VegetableLists.disabled = true;
　　　　　　} else {
　　　　　　}
　　　　}
　　break;
　　case "meat":
　　　　if (FoodForm.checked == true) {
　　　　　　//魚肉をチェック可能に
　　　　　　if (MeatLists && MeatLists.length) {
　　　　　　　　for (i = 0; i < MeatLists.length; i++) {
　　　　　　　　　　MeatLists[i].disabled = false;
　　　　　　　　}
　　　　　　} else if (MeatLists) {
　　　　　　　　MeatLists.disabled = false;
　　　　　　} else {
　　　　　　}
　　　　} else {
　　　　　　//魚肉をチェック不可能に
　　　　　　if (MeatLists && MeatLists.length) {
　　　　　　　　for (i = 0; i < MeatLists.length; i++) {
　　　　　　　　　　MeatLists[i].disabled = true;
　　　　　　　　}
　　　　　　} else if (MeatLists) {
　　　　　　　　MeatLists.disabled = true;
　　　　　　} else {
　　　　　　}
　　　　}
　　break;
　　default:
　　}
}
</script>
</head>
<body>
<form id="Form1">
:
<INPUT TYPE="CHECKBOX" NAME="food" value="果物" onClick="checkFood('fruit', this)">(1) 果物
<INPUT TYPE="CHECKBOX" NAME="food" value="野菜" onClick="checkFood('vegetable', this)">(2) 野菜
<INPUT TYPE="CHECKBOX" NAME="food" value="肉魚" onClick="checkFood('meat', this)">(3) 肉魚
<br>
<INPUT TYPE="CHECKBOX" NAME="fruit" value="りんご" disabled>[a] りんご
<INPUT TYPE="CHECKBOX" NAME="fruit" value="みかん" disabled>[b] みかん
<INPUT TYPE="CHECKBOX" NAME="vegetable" value="キャベツ" disabled>[c] キャベツ
<INPUT TYPE="CHECKBOX" NAME="meat" value="牛肉" disabled>[d] 牛肉
<INPUT TYPE="CHECKBOX" NAME="meat" value="魚" disabled>[e] 魚
:
</form>
</body>
</HTML>

- 0
- 件

通報する

この回答へのお礼

EURさん、別のスレでもお世話になりました。
こちらも大変汎用性が高いです。
野菜、肉魚にも適用できるという
要望以上のものをご提示いただけたおかげで
今作っているページをもっとよくばりに
作っちゃいそうです(＾＾；

本当にありがとうございました。

＃すみません、本来20pt入力させていただきたい
ところですが、別レスでの20ptに免じて
今回は別の回答者様への20として
ご容赦いただけますと幸いです。

通報する

お礼日時：2005/07/12 12:38

No.2ベストアンサー

回答者： jch
回答日時：2005/07/12 11:58

<html>

<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Test</title>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</head>
<body onload="oncheck()">
<hr><p>
<CENTER>タイムアウト発生</CENTER>
<p>
<form id="Form1" name = "kkk">
<INPUT TYPE="CHECKBOX" NAME="food" value="果物" onclick="check();">(1) 果物
<INPUT TYPE="CHECKBOX" NAME="food" value="野菜">(2) 野菜
<INPUT TYPE="CHECKBOX" NAME="food" value="肉魚">(3) 肉魚
<br>
<INPUT TYPE="CHECKBOX" NAME="fruit" value="りんご">[a] りんご
<INPUT TYPE="CHECKBOX" NAME="fruit" value="みかん">[b] みかん
<INPUT TYPE="CHECKBOX" NAME="fruit" value="ぶどう">[c] ぶどう
<INPUT TYPE="CHECKBOX" NAME="fruit" value="バナナ">[d] バナナ
</form></p>
<hr>
<p></p>
</body>
</html>