チェックボックスとラジオボタンのdisable/enable連動

解決済

質問者：litton101
質問日時：2005/11/10 18:06
回答数：1件

文末ソースの通り　(1) 分類グループ、(2) すいかグループ、(3) 色グループ
というフォーム類があります。

これを次のような法則性でdisable/enableを切り替えたいです。
(1) 初期値で、「すいかグループ」と「色グループ」はdisabled。
(2) 「果物」がONの間だけ「すいかグループ」がenable（初期値で「含む」をON）
　　ここで「色グループ」はまだdisabledのまま。
(3) 「除く」がONの時のみ、「色グループ」もenable。他の「含む」「のみ」を選択中、
　「色グループ」は常にdisabled。
(4) 「色グループ」が一つ以上チェックされている間、「分類グループ」の
　　「肉」「魚」「穀物」「飲料」はdisabled。
　　「色グループ」がdisableである間、「肉」～「飲料」は常にenable。

昨日も類似質問ｎご教示いただき（解決済み）、
本件に応用を試みましたが、(4) でつまづきました。

よろしくお願い致します

<html>
<head></head>
<body>
<form>
■分類<br>
<input type="checkbox" name="category[]">果物
(■すいか
<input type="radio" name="suika" disabled checked>含む
<input type="radio" name="suika" disabled>除く
<input type="radio" name="suika" disabled>のみ)<br>
<input type="checkbox" name="category[]">肉<br>
<input type="checkbox" name="category[]">魚<br>
<input type="checkbox" name="category[]">穀物<br>
<input type="checkbox" name="category[]">飲料<br>
<br>■色<br>
<input type="checkbox" name="color[]" disabled>赤<br>
<input type="checkbox" name="color[]" disabled>黄<br>
<input type="checkbox" name="color[]" disabled>青<br>
<input type="checkbox" name="color[]" disabled>白<br>
</form>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yambejp
回答日時：2005/11/11 11:56

あまり複雑な条件はつけすぎるとろくなことがないです。

もう少し、トリガーと結果を調整した方がよいかも知れません。
この手の複数のオブジェクトの属性を調整する場合は
nameだとcgiなどへの影響もあるでしょから
以前申し上げたとおりclassで管理するとよいでしょう。

<html>
<head>
<script language="javascript">
function classDisable(f,cn,fl){
for (var i=0;i<f.elements.length;i++){
if(f.elements[i].className==cn){f.elements[i].disabled=fl}
}
}
function classCheck(f,cn){
for (var i=0;i<f.elements.length;i++){
if(f.elements[i].className==cn && f.elements[i].checked==true && f.elements[i].disabled==false){return true;}
}
return false;
}
</script>
</head>
<body>
<form>
■分類<br>
<input type="checkbox" name="category[]" onClick="classDisable(this.form,'suika',!this.checked);classDisable(this.form,'color',!(!this.form.suika[1].disabled && this.form.suika[1].checked));classDisable(this.form,'nofruit',classCheck(this.form,'color'));">果物
(■すいか
<input type="radio" name="suika" class="suika" disabled onClick="classDisable(this.form,'color',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'color'));" checked>含む
<input type="radio" name="suika" class="suika" disabled onClick="classDisable(this.form,'color',!this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'color'));">除く
<input type="radio" name="suika" class="suika" disabled onClick="classDisable(this.form,'color',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'color'));">のみ)<br>
<input type="checkbox" name="category[]" class="nofruit">肉<br>
<input type="checkbox" name="category[]" class="nofruit">魚<br>
<input type="checkbox" name="category[]" class="nofruit">穀物<br>
<input type="checkbox" name="category[]" class="nofruit">飲料<br>
<br>■色<br>
<input type="checkbox" name="color[]" class="color" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">赤<br>
<input type="checkbox" name="color[]" class="color" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">黄<br>
<input type="checkbox" name="color[]" class="color" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">青<br>
<input type="checkbox" name="color[]" class="color" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">白<br>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

yambejpさん、いつも厚かましい質問に
懇切丁寧にご教示くださいまして、
本当に感謝に耐えません。

わたしも、もう少しシンプルにならないものかと
考え抜いたのですが、一番分かりやすく間違い
ないのが質問の仕様かな・・と思いました。

おかげさまで、本当に助かりました。
重ねて御礼申し上げます。

通報する

お礼日時：2005/11/11 12:42

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