- ベストアンサー
チェックに応じて違うチェックボックスをアクティブにしたい
次の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>
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<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"> <!-- function check() { var v = document.kkk.food[0].checked; for(var i=0; i<3; i++){ if(v) { document.kkk.fruit[i].disabled = false } else { document.kkk.fruit[i].disabled= true; } } document.kkk.fruit[3].disabled= true; } function oncheck() { for(var i=0; i<4; i++){ document.kkk.fruit[i].checked= false; document.kkk.fruit[i].disabled= true; } for(var i=0; i<3; i++){ document.kkk.food[i].checked= false; } } //--> </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>
その他の回答 (1)
- EUR
- ベストアンサー率61% (29/47)
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>
お礼
EURさん、別のスレでもお世話になりました。 こちらも大変汎用性が高いです。 野菜、肉魚にも適用できるという 要望以上のものをご提示いただけたおかげで 今作っているページをもっとよくばりに 作っちゃいそうです(＾＾； 本当にありがとうございました。 ＃すみません、本来20pt入力させていただきたい ところですが、別レスでの20ptに免じて 今回は別の回答者様への20として ご容赦いただけますと幸いです。
お礼
jchさん、ご教示ありがとうございました。 早速動作確認させていただいたところ、 まさに要望どおり完璧な動作です！ スクリプトも整然としていて わたしでもよくわかりました。 本当に勉強になりました。