javaScriptについて質問です。


チェックボックス項目が以下のようにあるとします。
<input type="checkbox" name="aaa" value="0" />aaa</label></p>
<input type="checkbox" name="bbb" value="1" />bbb</label></p>
<input type="checkbox" name="ccc" value="2" />ccc</label></p>


このチェックボックスのチェックされた値によってチェックボックスの制御を行いたいと思っています。

"aaa"のチェックボックスにチェックが入れられた場合、cccのチェックボックスは選択不可(disable)状態にする
"bbb"のチェックボックスにチェックが入れられた場合、cccのチェックボックスは選択不可(disable)状態にする

どのように記載したらよいでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2010/10/22 13:37:22
  • 終了:2010/10/25 09:20:51

ベストアンサー

id:taknt No.3

きゃづみぃ回答回数13481ベストアンサー獲得回数11982010/10/22 14:21:12

ポイント30pt

<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}
}
return false;
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="aaa" class="aaa" value="0"  onClick="classDisable(this.form,'ccc',this.checked);"> aaa</label></p>
<input type="checkbox" name="bbb" class="bbb" value="1"  onClick="classDisable(this.form,'ccc',this.checked);"> bbb</label></p>
<input type="checkbox" name="ccc" class="ccc" value="2" />ccc</label></p>

</form>
</body>
</html>

こんな感じですかねぇ。

id:Ryo0524

こちらの方法で実装させて頂きました。ありがとうございます。

2010/10/25 09:19:41

その他の回答(2件)

id:taknt No.1

きゃづみぃ回答回数13481ベストアンサー獲得回数11982010/10/22 14:26:35

ポイント27pt

<html>
<body>
<form>
<input type="checkbox" name="aaa" class="aaa" value="0"  onClick="classDisable(this.form.ccc.disabled=this.checked);"> aaa</label></p>
<input type="checkbox" name="bbb" class="bbb" value="1"  onClick="classDisable(this.form.ccc.disabled=this.checked);"> bbb</label></p>
<input type="checkbox" name="ccc" class="ccc" value="2" />ccc</label></p>
</form>
</body>
</html>

汎用的でなく、直接指定してやる方法です。

id:ween No.2

ween回答回数78ベストアンサー獲得回数72010/10/22 14:25:14

ポイント27pt
var aaa = document.all('aaa');
var bbb = document.all('bbb');
var ccc = document.all('ccc');

aaa.onclick = function() {hoge(this, bbb)};
bbb.onclick = function() {hoge(this, aaa)};

function hoge(obj, obj2) {
	if(obj.checked) ccc.disabled = true;
	else if(!obj2.checked) ccc.disabled = false;
};

document.allはFierfoxなどでは使えませんので

getElementsByNameを使うか

idをそれぞれ付与し、getElementsByIdを使った方が手間が省けます。

id:Ryo0524

参考になりました。ありがとうございます。

2010/10/25 09:19:18
id:taknt No.3

きゃづみぃ回答回数13481ベストアンサー獲得回数11982010/10/22 14:21:12ここでベストアンサー

ポイント30pt

<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}
}
return false;
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="aaa" class="aaa" value="0"  onClick="classDisable(this.form,'ccc',this.checked);"> aaa</label></p>
<input type="checkbox" name="bbb" class="bbb" value="1"  onClick="classDisable(this.form,'ccc',this.checked);"> bbb</label></p>
<input type="checkbox" name="ccc" class="ccc" value="2" />ccc</label></p>

</form>
</body>
</html>

こんな感じですかねぇ。

id:Ryo0524

こちらの方法で実装させて頂きました。ありがとうございます。

2010/10/25 09:19:41

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません