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

selectメニューによるチェックボックスの表示・非表示

解決済

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

リストメニューで選択された項目がアクティブになるようなフォームを作成したいと考えています。
下記コードの上部チェックボックスがselectメニューになっているようなものです。
JavaScriotに関して未熟者ですので、どなたか参考になるご意見／回答を頂けませんでしょうか？宜しくお願いいたします。

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
// 制御用フラグ
// 0なら対象グループは無効(disabled)、1以上なら有効
var FLAG = {
'A':0,
'B':0,
'C':0,
'E':0
};
// 初期化
window.onload = function(){
var controlList = document.getElementById('ctr_FLAG').getElementsByTagName('input');
for(var i=0;controlList[i];i++){
if(controlList[i].checked){
var nameList = controlList[i].value.split(/,/);
for(var j=0;nameList[j];j++){
FLAG[ nameList[j] ]++;
}
}
}
for(var x in FLAG) {
fchk2_sub(x);
}
}
// チェックが変更されたら
function fchk2(obj) {
nameList = obj.value.split(/,/);
for(var i=0;nameList[i];i++) {
if(obj.checked) {
FLAG[nameList[i]]++;
} else {
FLAG[nameList[i]]--;
}
fchk2_sub(nameList[i]);
}
}
// disableの変更
function fchk2_sub(groupe_name,dsiabled_value){
var inputList = document.getElementById('gr_'+groupe_name).getElementsByTagName('input');
for(var i=0;inputList[i];i++) {
inputList[i].disabled = FLAG[groupe_name]>0?false:true;
}
}
//-->
</script>
</head>
<body>

<form name='form2' action='#'>
<p id="ctr_FLAG">
<input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' >
Aをアクティブに<br>
<input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' >
AとBをアクティブに<br>
<input type='checkbox' name='chk1' value='A,B,C' onclick='fchk2(this);'>
AとBとCをアクティブに<br>
<input type='checkbox' name='chk12' value='A,B,C,E' onclick='fchk2(this);'>
AとBとCとDをアクティブに</p>
<p>=====================</p>
<p id="gr_A">
<input type='checkbox' name='a1' value='1'> 選択肢A<br>
<input type='checkbox' name='a2' value='1'> 選択肢A<br>
<input type='checkbox' name='a3' value='1'> 選択肢A<br>
</p>
<p id="gr_B">
<input type='checkbox' name='b1' value='1'> 選択肢B<br>
<input type='checkbox' name='b2' value='1'> 選択肢B<br>
<input type='checkbox' name='b3' value='1'> 選択肢B<br>
</p>
<p id="gr_C">
<input type='checkbox' name='c1' value='1'> 選択肢C<br>
<input type='checkbox' name='c2' value='1'> 選択肢C<br>
<input type='checkbox' name='c3' value='1'> 選択肢C<br>
</p>
<p id="gr_E">
<input type='checkbox' name='e1' value='1'> 選択肢E<br>
<input type='checkbox' name='e2' value='1'> 選択肢E<br>
<input type='checkbox' name='e3' value='1'> 選択肢E
</p>
</form>

</body>
</html>

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

基本フローとしては常に全部disableにして、必要に応じてdisableを解除


とするとすっきりしますね。
こんな感じでどうでしょう？

<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
disableAllGr();
}

function disableAllGr(){
var inputList = document.getElementsByTagName('p');
for(var i=0;i<inputList.length;i++){
var obj=inputList[i];
if(obj.id.match(/^gr_/)){
var n=obj.firstChild;
while(n){
if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=true;
n=n.nextSibling;
}
}
}
}
function fchk2(obj) {
disableAllGr();
var nameList = obj.value.split(/,/);
for( var i in nameList){
if(!document.getElementById('gr_'+nameList[i])) return false;
var n=document.getElementById('gr_'+nameList[i]).firstChild;
while(n){
if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=false;
n=n.nextSibling;
}
}
}
</script>
</head>
<body>

<form>
<p id="ctr_FLAG">
<select onchange='fchk2(this)'>
<option value=''>選択</option>
<option value='A'>Aをアクティブに</option>
<option value='A,B'>AとBをアクティブに</option>
<option value='A,B,C'>AとBとCをアクティブに</option>
<option value='A,B,C,E'>AとBとCとEをアクティブに</p>
</select>
</p>
<p>=====================</p>
<p id="gr_A">
<input type='checkbox' name='a1' value='1'> 選択肢A<br>
<input type='checkbox' name='a2' value='1'> 選択肢A<br>
<input type='checkbox' name='a3' value='1'> 選択肢A<br>
</p>
<p id="gr_B">
<input type='checkbox' name='b1' value='1'> 選択肢B<br>
<input type='checkbox' name='b2' value='1'> 選択肢B<br>
<input type='checkbox' name='b3' value='1'> 選択肢B<br>
</p>
<p id="gr_C">
<input type='checkbox' name='c1' value='1'> 選択肢C<br>
<input type='checkbox' name='c2' value='1'> 選択肢C<br>
<input type='checkbox' name='c3' value='1'> 選択肢C<br>
</p>
<p id="gr_E">
<input type='checkbox' name='e1' value='1'> 選択肢E<br>
<input type='checkbox' name='e2' value='1'> 選択肢E<br>
<input type='checkbox' name='e3' value='1'> 選択肢E
</p>
</form>

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

まさに望んだとおりの結果がでました。
本当に有難うございます。

通報する
お礼日時：2008/08/19 14:41

No.1

  • 回答者： steel_gray
  • 回答日時：

HTML部分は好みで色々変えた。


あくまでサンプルなんで自分流に直して試してみて。

スクリプト
function gr_ctrl(){
var S=document.getElementById('ctr_FLAG');
for(var i=0;S.options[i];i++){
var C=document.getElementById(S.options[i].value).getElementsByTagName('input');
for(var j=0;C[j];j++) C[j].disabled = !S.options[i].selected;
}
}
window.onload=gr_ctrl;

ＨＴＭＬ
<form>
<p><select size="2" multiple id="ctr_FLAG" onchange="gr_ctrl()">
<option value="gr_A">Ａ</option>
<option value="gr_B">Ｂ</option>
</select></p>

<fieldset id="gr_A"><legend>グループＡ</legend>
<ul>
<li><input type="checkbox" value="1" name="a1" id="a1"> <label for="a1">選択肢a1</label></li>
<li><input type="checkbox" value="1" name="a2" id="a2"> <label for="a2">選択肢a2</label></li>
<li><input type="checkbox" value="1" name="a3" id="a3"> <label for="a3">選択肢a3</label></li>
</ul>
</fieldset>
<fieldset id="gr_B"><legend>グループＢ</legend>
<ul>
<li><input type="checkbox" value="1" name="b1" id="b1"> <label for="b1">選択肢b1</label></li>
<li><input type="checkbox" value="1" name="b2" id="b2"> <label for="b2">選択肢b2</label></li>
<li><input type="checkbox" value="1" name="b3" id="b3"> <label for="b3">選択肢b3</label></li>
</ul>
</fieldset>
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答いただき本当に有難うございます。
いろいろ参考にさせていただいています。

通報する
お礼日時：2008/08/19 14:39

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報