- 締切済み
ボタンで選択されていないセレクトメニューの非反映
現在JavaScriptを使った、HP上での簡単な見積もりページを製作しています。 チェックボックスやラジオボタン、セレクトメニューで選ばれた項目を足して、最終的にテキストボックスに合計金額を出したいと思っています。 内容は全く違いますが、画像のような感じで項目などを作りたいと思っております。 その時に、ラジオボタンでチェックされていないセレクトメニューは選択（計算に反映）されないようにしたいのです。 （「プラスチック丸型編み込み」等が選択されている時は、「蓋付きのボックス」や「蓋付きバスケット」のセレクトメニューは選択されないようにしたいのです。） 自分の作ったものでは、「色を選択」の時点では０に設定してあるのですが、「蓋付きのボックス」のセレクトメニューが他のものを選択していた場合、それが反映されてしまうのです。 計算させるだけならできるのですが、選択されないようにする方法がわからなくて困っております。 拙い文章で申し訳ないのですが、どなたか教えてくださらないでしょうか？
- woo5963
- お礼率0% (0/7)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
どのような文書構成なのかわからないので、勝手な想定かつ少々非効率的ですが、アイデアとして… （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function linker(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "INPUT" || t.type != "radio") return; var sel, i, s; sel = t.form.getElementsByTagName("select"); for(i=0; s=sel[i++];) if(/(^| )linkage( |$)/.test(s.className)){ t = s.previousSibling; while(t && (t.nodeName != "INPUT" || t.type != "radio")) t = t.previousSibling; if(t) s.disabled = !t.checked; } } //--> </script> </head> <body> <form action="#" onclick="linker(event)"> <fieldset> <legend>ボックスの蓋</legend> <input type="radio" name="cover" value="covered">蓋あり <select class="linkage" name="color_of_cover" disabled> <option value="1000">white</option> <option value="1200">yellow</option> <option value="1400">red</option> <option value="1600">black</option> </select> <br> <input type="radio" name="cover" value="open">蓋なし </fieldset> </form> </body> </html> ＊「linkage」設定のあるselect要素が対象。 それ以前の兄弟要素のラジオボタンに連動します。
disabled
補足
あやふやな質問にも関わらず、回答ありがとうございます。 文章構成などは下記のHTMLをしようしているのですが…。 「蓋付きのボックス」の＜ラジオボックスをチェックしなければ選択できない＞はクリアできたのですが、「蓋付きバスケット」の方で迷っています。 後はこれで合計金額がきちんと出ればいいのですが…、 もうすこしお力とお時間を頂けないでしょうか？ <html> <head> <title>簡単見積もり表</title> <script Language="JavaScript"> <!-- function calc() { n = 0; fObj = document.myFORM; n += eval(fObj.sel0.options[fObj.sel0.selectedIndex].value); n += eval(fObj.sel1.options[fObj.sel1.selectedIndex].value); for (i=0; i<3; i++) if (fObj[i].checked) n += eval(fObj[i].value); for (i=3; i<19; i++) if (fObj[i].checked) n += eval(fObj[i].value); fObj.result.value = n; } function linker(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "INPUT" || t.type != "radio") return; var sel, i, s; sel = t.form.getElementsByTagName("select"); for(i=0; s=sel[i++];) if(/(^| )linkage( |$)/.test(s.className)){ t = s.previousSibling; while(t && (t.nodeName != "INPUT" || t.type != "radio")) t = t.previousSibling; if(t) s.disabled = !t.checked; } } // --></script> </head> <body> <form name="myFORM" action="#" onclick="linker(event)"> <BR> <b>セットの果物を一つお選び下さい</b><br> <input type="radio" name="ch1" value="100">りんご（100円） <input type="radio" name="ch1" value="20">バナナ（20円） <input type="radio" name="ch1" value="200">梨（200円） <input type="radio" name="ch1" value="250">ブドウ（250円） <input type="radio" name="ch1" value="150" checked>みかん（150円）<br> <BR> <b>リボンの色をお選びください</b><br> <input type="radio" name="ch2" value="0" checked>赤（0円） <input type="radio" name="ch2" value="2000">青（0円） <input type="radio" name="ch2" value="0">金（10円）<br> <hr> <b>バスケットの形をお選び下さい</b><br> <INPUT type="radio" name="cover" value="1200" checked>プラスチック丸型編み込み\1200<INPUT type="checkbox" name="bx1" value="500">素材を木に変更（+\500）<BR> <INPUT type="radio" name="cover" value="1500">編み込み四角\1500<BR> <INPUT type="radio" name="cover" value="1500">編み込み楕円\1500<BR> <INPUT type="radio" name="cover" value="1000">蓋なしボックスレインボー1000円<br> <INPUT type="radio" name="cover" value="covered"><b>蓋付きのボックス</b> 色によって値段が変化します<br> <select class="linkage" name="color_of_cover" disabled> <OPTION value="0" selected>色を選択</OPTION> <OPTION value="39900">赤1000円</OPTION> <OPTION value="52500">青1000円</OPTION> <OPTION value="54600">金1100円</OPTION> </select><BR> <INPUT type="radio" name="cover" value="0"><b>蓋付きバスケット</b> 形によって値段が変化します<BR> <select name="sel1"> <OPTION value="0" selected>形を選択</OPTION> <OPTION value="1500">丸 1500円</OPTION> <OPTION value="1600">四角 1600円</OPTION> <OPTION value="1600">楕円 1600円</OPTION> </select> <br><hr><BR> <b>ご希望のオプションがあれば選択して下さい。（複数選択可）</b><BR> <INPUT type="checkbox" name="bx1" value="300">クッション材\300 <INPUT type="checkbox" name="bx1" value="200">飾り\200<BR> <INPUT type="checkbox" name="bx1" value="150">メッセージカード\150 <INPUT type="checkbox" name="bx1" value="2500">花束\2,500<BR> <BR> <hr> <input type="button" value="合計を出す" onClick="calc()"><br> 合計<input type="text" name="result"><br> </form> </body> </html>