dポイントプレゼントキャンペーン実施中！

ボタンで選択されていないセレクトメニューの非反映

締切済

  • 質問者：woo5963
  • 質問日時：
  • 回答数：2件

現在JavaScriptを使った、HP上での簡単な見積もりページを製作しています。
チェックボックスやラジオボタン、セレクトメニューで選ばれた項目を足して、最終的にテキストボックスに合計金額を出したいと思っています。
内容は全く違いますが、画像のような感じで項目などを作りたいと思っております。

その時に、ラジオボタンでチェックされていないセレクトメニューは選択（計算に反映）されないようにしたいのです。
（「プラスチック丸型編み込み」等が選択されている時は、「蓋付きのボックス」や「蓋付きバスケット」のセレクトメニューは選択されないようにしたいのです。）
自分の作ったものでは、「色を選択」の時点では０に設定してあるのですが、「蓋付きのボックス」のセレクトメニューが他のものを選択していた場合、それが反映されてしまうのです。

計算させるだけならできるのですが、選択されないようにする方法がわからなくて困っております。
拙い文章で申し訳ないのですが、どなたか教えてくださらないでしょうか？

「ボタンで選択されていないセレクトメニュー」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： fujillin
  • 回答日時：

どのような文書構成なのかわからないので、勝手な想定かつ少々非効率的ですが、アイデアとして…



（全角空白は半角に）
<!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要素が対象。
　それ以前の兄弟要素のラジオボタンに連動します。

この回答への補足

あやふやな質問にも関わらず、回答ありがとうございます。
文章構成などは下記の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>

補足日時：2011/10/26 01:56
通報する
    • good
    • 0
    • 件
通報する

No.1

disabled

    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報