checkboxとselectメニューの連動およびalertの出し方

質問

メールフォームを利用し、簡単なショッピングフォームを作成しているのですが、壁にぶち当たりましたので、恐縮しておりますが、はじめて質問させて頂きます。よろしくお願い致します。

function setTF(cOBJ,fName1,fName2)
{
document.myFORM[fName1].disabled = !cOBJ.checked;
document.myFORM[fName2].disabled = !cOBJ.checked;
}

function delWarn(obj)
{
if(obj.checked)
{
var cf = confirm( '数量も必ずご入力ください' );
if(cf)
obj.checked = true;
else
obj.checked = false;
}
}

----
<form action="～test.cgi" method="post" name="myFORM">
<INPUT type="checkbox" name="item1" value="商品1" onClick="setTF(this,'item1kazu','service1'),delWarn(this)">商品1
<SELECT name="item1kazu" disabled>
<OPTION value="">数量</OPTION>
<OPTION value="（1本）">1</OPTION>
<OPTION value="（2本）">2</OPTION>
<OPTION value="（3本）">3</OPTION>
</SELECT>本<br>

<INPUT type="checkbox" name="item2" value="商品2" onClick="setTF(this,'item2kazu'),delWarn(this)">商品2
<SELECT name="item2kazu" disabled>
<OPTION value="">数量</OPTION>
<OPTION value="（1本）">1</OPTION>
<OPTION value="（2本）">2</OPTION>
<OPTION value="（3本）">3</OPTION>
</SELECT>個<br>

<INPUT type="checkbox" name="item3" value="商品3" onClick="setTF(this,'item3kazu'),delWarn(this)">商品3
<SELECT name="item3kazu" disabled>
<OPTION value="">数量</OPTION>
<OPTION value="（1本）">1</OPTION>
<OPTION value="（2本）">2</OPTION>
<OPTION value="（3本）">3</OPTION>
</SELECT>セット<br>

<p><INPUT type="checkbox" name="service1" value="サービス1" disabled>サービス1</p>

<input type="submit" name="sendBtn" value="内容確認画面へ">
</FORM>

内容は、
商品1、2、3にそれぞれチェックボックスをおき、それを選択したらそれぞれ数量の選択（selectメニュー）がはじめて出来る様になる。さらにサービス1は商品1を選択するとチェック可能になるというものです。ここまでは順調に実現できました。

問題は、商品を選択した時のみ数量の選択を必須にしたい、という所です。
使用予定のcgiでは、入力必須項目に設定すると、商品の選択をしていない数量部分もおのずと必須になり具合が悪いため、
javascriptのalertを利用し上手く制御できやしないかと、ない頭をひねって、現在の状況で止まってしまいました...。
現状、商品1をクリックすると「数量も必ずご入力下さい」というalertがでて、数量選択がアクティブに。ただし、商品2、商品3はalertが出ません。
また、もしこれが実現可能になったとしても商品ごとにalertが表示され、うっとおしいのはさることながら、あくまでも意識づけで入力必須ではないため、もっと良い方法はないか、是非ご教授願いたいと思っております。

理想としては、商品にチェックしたもののみ数量選択を必須とする、
→sbmitを押した際、「数量を選択して下さい」というalertを表示。
が実現できればと願っております。
（チェックboxなしで数量のみでやればカンタンなのでしょうが、今回はこちらの構成でいきたいと思っております...）

どなたか是非アドバイス頂ければ幸いです、よろしくお願い致します。

回答No.3

pick52

No3 です。
以下の部分、作成中のゴミが入っていました。

以下のように修正してください。
(結果は同じなので修正しなくても動作しますが無駄なので)

document.myFORM[arguments[1]].disabled = !(cOBJ.checked);
↓
document.myFORM[fName].disabled = !(cOBJ.checked);

回答No.2

pick52

こんな感じでどうでしょうか。

<script>
function setTF(cOBJ, fName) {
document.myFORM[cOBJ.name + 'kazu'].disabled = !(cOBJ.checked);
// 第2引数が存在する場合は実行する
if(fName != undefined) {
document.myFORM[arguments[1]].disabled = !(cOBJ.checked);
}
}

// フォームのチェック
function check() {
var form = document.myFORM;
// フォームをループする
for(var i = 0; i < form.length; i++) {
// タイプがチェックボックスで且つ name が 'service1' でなかったら
if(form[i].type == 'checkbox' && form[i].name != 'service1') {
// チェックされていたら
if(form[i].checked) {
var select = document.getElementsByName(form[i].name + 'kazu')[0];
// 未選択の場合は
if(select.selectedIndex == 0) {
// アラートの表示とフォーカスを与えて return false
alert('数量も必ずご入力ください');
select.focus();
return false;
}
}
}
}
return true;
}
</script>
<form action="～test.cgi" method="post" name="myFORM">
<input type="checkbox" name="item1" value="商品1" onclick="setTF(this, 'service1');">商品1
<select name="item1kazu" disabled>
<option value="">数量</option>
<option value="（1本）">1</option>
<option value="（2本）">2</option>
<option value="（3本）">3</option>
</select>本<br>

<input type="checkbox" name="item2" value="商品2" onClick="setTF(this);">商品2
<select name="item2kazu" disabled>
<option value="">数量</option>
<option value="（1本）">1</option>
<option value="（2本）">2</option>
<option value="（3本）">3</option>
</select>個<br>

<input type="checkbox" name="item3" value="商品3" onClick="setTF(this);">商品3
<select name="item3kazu" disabled>
<option value="">数量</option>
<option value="（1本）">1</option>
<option value="（2本）">2</option>
<option value="（3本）">3</option>
</select>セット<br>

<p><input type="checkbox" name="service1" value="サービス1" disabled>サービス1</p>

<input type="submit" name="sendBtn" value="内容確認画面へ" onclick="return check();">
</form>

回答No.1

auty

以下のコードを参考にしてみてください。
------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>sample</title>
<script type="text/javascript">
function setTF(cOBJ,fName1,fName2) {
document.myFORM[fName1].disabled = !cOBJ.checked;
if (document.myFORM[fName1].disabled) document.myFORM[fName1].selectedIndex = 0;
if (fName2) document.myFORM[fName2].disabled = !cOBJ.checked;
}

function checkWarn(f) {
var ss="";

if　(f.item1.checked && f.item1kazu.value=="") {
ss += "商品1 ";
}
if　(f.item2.checked && f.item2kazu.value=="") {
ss += "商品2 ";
}
if　(f.item3.checked && f.item3kazu.value=="") {
ss += "商品3 ";
}
if (ss !="" ) {
alert(ss + "の数量を選択して下さい。");
return false;
} else {
return true;
}
}

function setBoxNum(e) {
var boxNum = setTarget();
}
</script>
</head>
<body>
<form action="test.cgi" method="post" name="myFORM">
<INPUT type="checkbox" name="item1" value="商品1" onClick="setTF(this,'item1kazu','service1');">商品1
<SELECT name="item1kazu" disabled>
<OPTION value="">数量</OPTION>
<OPTION value="（1本）">1</OPTION>
<OPTION value="（2本）">2</OPTION>
<OPTION value="（3本）">3</OPTION>
</SELECT>本<br>

<INPUT type="checkbox" name="item2" value="商品2" onClick="setTF(this,'item2kazu');">商品2
<SELECT name="item2kazu" disabled>
<OPTION value="">数量</OPTION>
<OPTION value="（1本）">1</OPTION>
<OPTION value="（2本）">2</OPTION>
<OPTION value="（3本）">3</OPTION>
</SELECT>個<br>

<INPUT type="checkbox" name="item3" value="商品3" onClick="setTF(this,'item3kazu');">商品3
<SELECT name="item3kazu" disabled>
<OPTION value="">数量</OPTION>
<OPTION value="（1本）">1</OPTION>
<OPTION value="（2本）">2</OPTION>
<OPTION value="（3本）">3</OPTION>
</SELECT>セット<br>

<p><INPUT type="checkbox" name="service1" value="サービス1" disabled>サービス1</p>

<input type="submit" name="sendBtn" onclick="return checkWarn(this.form);" value="内容確認画面へ">
</FORM>

</body>
</html>