こんにちわ。
表記の件ですが、プルダウンメニューに連動するチェックボックスのdisableを切り換えたいと思っているのですが、なかなか上手くいきません・・・。
例えばプルダウンメニューにおいて
・食べ物
・生き物
・果物
・穀物
というようなメニューがあり、さらにチェックボックスとして
・お米
・りんご
・さかな
・みかん
というチェックボックスがあるとします。
この場合、[食べ物]を選択すると全てが選択できるようになり、[果物]を選択すると[りんご]と[みかん]以外は無効(チェックボックスの選択ができない状態)となるスクリプトを作成したいということです。
もし、先行していずれかのチェックボックスが有効になっていて、プルダウンメニューを切り換えた場合はアラートと同時にチェックボックスをリセットするようできると尚素敵です。
皆様のお知恵を拝借できればと思います。
何卒お力添えいただければ幸いです。
No.3ベストアンサー
- 回答日時:
検索条件が1つではないなら、やはりチェックボックスには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
- 回答日時:
できれば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だったようで・・・^^;
度々大変恐縮ではございますが、ご回答いただけると幸いでございます。
大変わかりやすいご回答を頂き誠にありがとうございます。
なるほど。これはわかりやすいですね。
1番でご回答いただいた方のスクリプトと組み合わせてアラートによるチェックボックスの解除などを組み込んでいきたいと思います。
ありがとうございました。
No.1
- 回答日時:
<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>
これで動きますが、チェックボックスより上にテキストボックスやラジオボタンを配置すると恐らく誤動作します。
そのような場合はまた連絡ください。
我流要素を大量に含んでますので編集が少し難しいかもしれませんが・・。
ご丁寧な回答をいただきありがとうございます。
動作確認致しました。完璧です・・・。
わかりやすいコメントも頂いて大変恐縮です。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jquery 診断コンテンツにチェックボックスを付けたいです 3 2023/01/19 18:31
- Excel(エクセル) たくさんあるフォームコントロールを効率よく確認するには 1 2022/12/24 12:27
- Access(アクセス) チェックボックスにチェックが入った後の挙動 1 2022/08/21 12:39
- 迷惑メール・スパム gmailの過去のメールを一括削除する方法について 3 2023/04/19 05:27
- Excel(エクセル) 表内で、Enterキーで横→行の最後入力したら次の行の先頭に移動するマクロを作りたい 3 2022/05/01 21:19
- Visual Basic(VBA) userformでSheetを選択して開くコード 1 2023/05/15 16:27
- Excel(エクセル) スプレッドシートのチェックボックスとフィルタを連携させたい 2 2022/09/26 18:02
- Excel(エクセル) エクセルVBAでチェックボックスにチェックを入れる 1 2022/09/14 00:52
- Visual Basic(VBA) シートを選択して、1つのPDFにしたいのですが。 5 2022/10/03 20:18
- Excel(エクセル) エクセルを活用して受注表を作成中ですが関数が分からなく困ってました。 1 2022/07/22 09:14
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストボックス内の重複したも...
-
【JS】selectでchangeした時の...
-
javascriptでセレクトボックス...
-
VBScriptでHTMLのセレクトボッ...
-
ラジオボタンとプルダウンを連...
-
サイト内の物件を複数の検索条...
-
ラジオボタンの値が取得できな...
-
時間の選択に関して
-
全てのselect要素をデフォルト...
-
【javascript】連想配列からセ...
-
セレクトボックスで配列を呼び...
-
プルダウンで選択したCGIを動か...
-
javascriptでセルを矩形で選択する
-
javascriptだけでドロップダウ...
-
プルダウンの値によって活性・...
-
Selectボックスの一覧表示方法
-
select要素のvalueを配列で取得...
-
select option value が IE だ...
-
document.writeでセレクトボッ...
-
プルダウンのoptionの表示・非...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
全てのselect要素をデフォルト...
-
【JS】selectでchangeした時の...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
複数のプルダウンを1つにまとめ...
-
コードレビューをお願いします。
-
JavaScriptで<select>の<option...
-
<input>の選択肢をプルダウンメ...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
VBScriptでHTMLのセレクトボッ...
-
ラジオボタンとプルダウンを連...
-
javascriptで合計金額を算出し...
-
中百舌鳥駅と深井駅を入れ替え...
-
同じ名前のセレクトがある場合...
-
セレクトボックスで配列を呼び...
-
今日の日付を自動的にセレクト...
-
プルダウンの値によって活性・...
-
サイト内の物件を複数の検索条...
おすすめ情報