プルダウンメニューに連動するチェックボックスのdisable切り換え

質問

こんにちわ。

表記の件ですが、プルダウンメニューに連動するチェックボックスのdisableを切り換えたいと思っているのですが、なかなか上手くいきません・・・。

例えばプルダウンメニューにおいて
・食べ物
・生き物
・果物
・穀物

というようなメニューがあり、さらにチェックボックスとして
・お米
・りんご
・さかな
・みかん

というチェックボックスがあるとします。
この場合、[食べ物]を選択すると全てが選択できるようになり、[果物]を選択すると[りんご]と[みかん]以外は無効(チェックボックスの選択ができない状態)となるスクリプトを作成したいということです。

もし、先行していずれかのチェックボックスが有効になっていて、プルダウンメニューを切り換えた場合はアラートと同時にチェックボックスをリセットするようできると尚素敵です。

皆様のお知恵を拝借できればと思います。
何卒お力添えいただければ幸いです。

回答No.3

yambejp · ベストアンサー

検索条件が１つではないなら、やはりチェックボックスにはIDをふって
IDの管理テーブルをつくってそれでチェックする方がよいでしょう。

<script language="javascript">
function changeFunc(obj){
var v=obj.value;
var f=obj.form;
var food=new Object();
food["grain"]=new Array("rice","soba");
food["fruit"]=new Array("apple","orange");
food["meat"]=new Array("pork","fish");
food["hot"]=new Array("rice","soba","pork","fish");
food["cold"]=new Array("apple","orange");
food["red"]=new Array("apple","pork");
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
if(v=="") f[i].disabled=false;
else f[i].disabled=true;
}
}

if(typeof food[v] =="undefined") return false;

for(var j in food[v]){
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
if(f[i].id==food[v][j] ) f[i].disabled=false;
}
}
}
}
</script>
<form>
<select name="genre" onChange="changeFunc(this)">
<option value="">食べ物</option>
<option value="meat">生き物</option>
<option value="fruit">果物</option>
<option value="grain">穀物</option>
<option value="hot">温かい</option>
<option value="cold">冷たい</option>
<option value="red">赤い</option>
</select><br />
<input type="checkbox" value="お米" id="rice">お米<br />
<input type="checkbox" value="りんご" id="apple">りんご<br />
<input type="checkbox" value="みかん" id="orange">みかん<br />
<input type="checkbox" value="さかな" id="fish">さかな<br />
<input type="checkbox" value="豚肉" id="pork">豚肉<br />
<input type="checkbox" value="そば" id="soba">そば<br />
</form>

お礼

度々ご迅速な回答をいただいてありがとうございます。
バッチリです。素敵です。
これからいただいたスクリプトを元に勉強していきたいと思います。
本当にありがとうございました。

回答No.2

yambejp

できればclassなどで制御した方がわかりやすいでしょう。

<script language="javascript">
function changeFunc(obj){
var v=obj.value;
var f=obj.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
if(f[i].className==v || v=="") f[i].disabled=false;
else f[i].disabled=true;
}
}
}
</script>
<form>
<select name="genre" onChange="changeFunc(this)">
<option value="">食べ物</option>
<option value="meat">生き物</option>
<option value="fruit">果物</option>
<option value="grain">穀物</option>
</select><br />
<input type="checkbox" value="お米" class="grain">お米<br />
<input type="checkbox" value="りんご" class="fruit">りんご<br />
<input type="checkbox" value="みかん" class="fruit">みかん<br />
<input type="checkbox" value="さかな" class="meat">さかな<br />
<input type="checkbox" value="豚肉" class="meat">豚肉<br />
<input type="checkbox" value="そば" class="grain">そば<br />
</form>

お礼

大変わかりやすいご回答を頂き誠にありがとうございます。
なるほど。これはわかりやすいですね。
１番でご回答いただいた方のスクリプトと組み合わせてアラートによるチェックボックスの解除などを組み込んでいきたいと思います。
ありがとうございました。

補足

すいません・・・。少し補足というか、質問をさせていただいてよろしいでしょうか。
inputタグにおいてclass指定を複数にまたがることは可能でしょうか。
たとえば、上記の例でoptionタグに「火を通しても美味しい」というような属性が追加された場合、「お米」「さかな」「豚肉」「そば」が選択可能となるようなイメージです。

classの複数指定は半角スペースで、とグーグル先生に教えていただきましたが、どうやらそれはCSSだったようで・・・^^;
度々大変恐縮ではございますが、ご回答いただけると幸いでございます。

回答No.1

is_may

<script language="javascript" type="text/javascript">
<!--
cbMax=4;//チェックボックスの個数
dis=new Array("","1,2,4","1,3","2,3,4");//セレクトボックスを選択したときに無効にするID番号（","で区切る）
function xChangeDis(sNum){
t=0;
cache=dis[sNum-1].split(",");
for(i=1;i<=cbMax;i++){
document.getElementById(i).disabled=false;
}
if(cache[0]){
for(i=0;i<cache.length;i++){
document.getElementById(cache[i]).disabled=true;
if(document.f1.elements[cache[i]].checked==true){
if(!t){
alert("チェックを解除します。");
}
t=1;
document.f1.elements[cache[i]].checked=false;
}
}
}
}
-->
</script>
<form name="f1"><select onchange="xChangeDis(this.options[this.selectedIndex].value)">
<option value="1" selected>食べ物</option>
<option value="2">生き物</option>
<option value="3">果物</option>
<option value="4">穀物</option>
</select><br>
<br>
<input type="checkbox" id="1">お米<br>
<input type="checkbox" id="2">りんご<br>
<input type="checkbox" id="3">さかな<br>
<input type="checkbox" id="4">みかん<br>
</form>

これで動きますが、チェックボックスより上にテキストボックスやラジオボタンを配置すると恐らく誤動作します。
そのような場合はまた連絡ください。
我流要素を大量に含んでますので編集が少し難しいかもしれませんが・・。

お礼

ご丁寧な回答をいただきありがとうございます。
動作確認致しました。完璧です・・・。
わかりやすいコメントも頂いて大変恐縮です。
ありがとうございました。