人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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)状態にする

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

●質問者: Ryo0524
●カテゴリ:インターネット ウェブ制作
✍キーワード:AAA CCC JavaScript チェックボックス
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● きゃづみぃ
●27ポイント

<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>

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


2 ● ween
●27ポイント
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を使った方が手間が省けます。

◎質問者からの返答

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


3 ● きゃづみぃ
●30ポイント ベストアンサー

<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>

こんな感じですかねぇ。

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ