重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

プルダウンとチェックボックスの連動

解決済

  • 質問者：iemon_gori
  • 質問日時：
  • 回答数：4件

はじめましてよろしくおねがいします。
やりたいことはプルダウンのメニューの中身を活性したり非活性に
したいのですが、どのようにやるのか想像がつきません。
以下にソースを貼り付けました。
チェックボックスにチェックされた場合はメニューの中身の■Yahoo!をリンクさせない様にしたいです。
チェックが外れたときはメニューの中身はすべてリンクで表示します。

現状はすべてリンクしかできていないです。
チェックボックスとの連動の方法、メニューの中の非活性の方法を教えてください。よろしくおねがいします。


<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// プルダウンメニュー
flag = false;
function pullDown() {
if(flag) ID.style.visibility = "hidden";
else ID.style.visibility = "visible";
flag = !flag;
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="javaScript:pullDown()">メニューを表示する</A><BR>
<DIV id="ID" style="position:absolute;visibility:hidden;">
<A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR>
<A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR>
</DIV>
<BR><BR><BR><BR><BR><BR>
<FORM>
<INPUT TYPE ="checkbox">ここにチェックを入れるとプルダウンの■Yahoo!のみ非活性にしたい。
</FORM>
</BODY>
</HTML>

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： kazumero
  • 回答日時：

http://oshiete1.goo.ne.jp/kotaeru.php3?qid=2589974
上記によると、URLをコピペすると​という文字列がついてくるみたいですね。

これを削除したら正常に動きました。

この回答への補足

何とかここまで仕上げましたが、
肝心の「メニューを表示する」が非活性にするやり方に苦戦しております。

<html>
<head>
<title></title>
<script language="javascript">
<!--
// プルダウンメニュー
flag = false;
function pulldown() {
if(flag) id.style.visibility = "hidden";
else id.style.visibility = "visible";
flag = !flag;
}

function check() {
var ahref = document.getElementById('offlink');
var ahref_2 = document.getElementById('offAuctions');

if(document.form1.check1.checked){
ahref.removeAttribute('href');
}else{
ahref.setAttribute('href', 'http://www.yahoo.co.jp/');
}

if(document.form1.check2.checked){
ahref_2.removeAttribute('href');
}else{
ahref_2.setAttribute('href', 'http://auctions.yahoo.co.jp/');
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<a href="javascript:pulldown()">メニューを表示する</a><br>
<div id="id" style="position:absolute;visibility:hidden;">
<a href="http://www.yahoo.co.jp/" id="offlink">■yahoo!</a><br>
<a href="http://auctions.yahoo.co.jp/" id="offAuctions">■yahoo! auctions</a><br>
</div>
<br><br><br><br><br><br>
<form name="form1">
<input type ="checkbox" name="check1" onclick="check()">ここにチェックを入れるとプルダウンの■yahoo!のみ非活性にしたい。
<BR>
<input type ="checkbox" name="check2" onclick="check()">ここにチェックを入れるとプルダウンの■yahoo! auctionsのみ非活性にしたい。

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

補足日時：2008/01/18 01:51
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： kazumero
  • 回答日時：

No.2ですが、


何か知らないですが、​　とか言うのが加わってますね。削除しておいてください。

この回答への補足

kazumeroさんに作成いただいたものをさらにグレードアップしたく再投稿させていただきます。

考えている事は
１．「メニューを表示する」リンク自体を非活性にしてチェックされたら「メニューを表示する」を活性させてたいです。
２．チェックボックスをもうひとつ設けてチェックを入れるとすべて活性したいです。
<input type ="checkbox" name="check2" onclick="check()">ここにチェックを入れるとプルダウンがすべて活性にしたい。
３．チェックボックスがチェックされていなければ「メニューを表示する」は非活性状態にしたいです。

理解できていないので教えていただけないでしょうか、また関連リンクなどございましたら貼り付けていただけないでしょうか。

よろしくお願いいたします。

補足日時：2008/01/17 23:58
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

kazumeroさん
ありがとうございます。
​や？を削除したら動作しました！
またこの件について自分なりに調べて疑問になった点がありましたら質問させていただきます。
本当にありがとうございました。
　

通報する
お礼日時：2008/01/17 00:31

No.2

  • 回答者： kazumero
  • 回答日時：

こんな感じでいかがでしょうか？



<html>
<head>
<title></title>
<script language="javascript">
<!--
// プルダウンメニュー
flag = false;
function pulldown() {
if(flag) id.style.visibility = "hidden";
else id.style.visibility = "visible";
flag = !flag;
}

function check() {
var ahref = document.getElementById('offlink');
if(document.form1.check1.checked){
ahref.removeAttribute('href');
}else{
ahref.setAttribute('href', '​http://www.yahoo.co.jp/');
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<a href="javascript:pulldown()">メニューを表示する</a><br>
<div id="id" style="position:absolute;visibility:hidden;">
<a href="​http://www.yahoo.co.jp/" id="offlink">​■yahoo!</a><br>
<a href="​http://auctions.yahoo.co.jp/">​■yahoo! auctions</a><br>
</div>
<br><br><br><br><br><br>
<form name="form1">
<input type ="checkbox" name="check1" onclick="check()">ここにチェックを入れるとプルダウンの■yahoo!のみ非活性にしたい。
</form>
</body>
</html>


removeAttribute('href')
でhref属性を取り除き、
setAttribute('href', 'http://www.yahoo.co.jp/')
で、href属性とその値としてYahooのURLを指定しています。

この回答への補足

ご返答ありがとうございます。
早速こちらで動作を確認させていただきましたが、メニューリンクをクリックすると、
ライン１、文字１
オブジェクトを指定してくださいと言うエラーメッセージが表示されました。
チェックボックスをチェックしたときも同様のエラーでライン３３でした。
私にはスキル不足でエラーを消せませんでした。
すみませんがご確認願えませんでしょうか。
よろしくお願いいたします。

補足日時：2008/01/17 00:10
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： kazumero
  • 回答日時：

非活性とはどのような状態でしょうか？


■Yahoo!を消すのでしょうか、クリックしても何も怒らないようにしたいのでしょうか。
補足要求します。

この回答への補足

kazumeroさん
はじめまして。早速のリアクションありがとうございます。
■YAhoo！は消さないでメニュー上には表示したいと考えております。
クリックしても何も起こらない（グレー色）で表示したいです。
ボタンなど非活性にしたときの状態みたいな感じです。
よろしくお願いいたします。

補足日時：2008/01/16 23:00
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

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

Q質問する（無料）

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

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

おすすめ情報