• ベストアンサー

<div id="AA">の時、<form id="BB">内のselect要素などすべての要素をdisableにしたい。

▼次のようにページ内のdivタグのidの名前によって、formタグ内の要素をdisableにすることはJava scriptによって可能でしょうか？ <div id="AA">のとき、別の場所にある<form id="BB">内のselect要素などすべての要素をdisableにする。 また同時に、id="BB"に指定したスタイルシートの記述を書き換えることは可能でしょうか？ 何かよい方法をご存知でしたら教えてください。よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

>なぜか時々エラーが出ます。 ウチでちょっと試した程度ではエラーが発生しませんでした。 できましたら、発生したときのメッセージや場所また、ブラウザの種類なども教えてください。 以下は、予防的な意味での注意点についてちょっと書きます。 ＞return false; は、必要ないです。 書かない方がいいと思います。 ==nullの場合の処理が必要ないなら !=nullにすればよいです。 もしくは return false;でなくて ; のように空文でもよいです。 あと、idに使っている名前と同じ名前を変数名として使わない方が良いです。 つまり、 id="soldout"の時に var soldout;という風にはしない方が良いです。 同じでなければ、cartFormでもなんでもかまいません。 あと、scriptは、 <!-- （スクリプトの中身） //--> のように <!-- //--> で囲むようにします。 getElementById は、ブラウザやのブラウザのバージョンによっては使えないことがあります。 その場合は、使えるかどうかを調べる必要があります。 <script type="text/javascript"> <!-- function stockStatus (num){ var f=document.getElementById("soldout"); if(f!=null){ for (var i =0; i<=f.length -1 ;i++){ f.elements[i].disabled=num; } } } //--> </script>

toutetsu
質問者

お礼

補足に掲載したURLの掲載がgooの規約に反し、記載内容ががシステム側より修正さましたので、この件につきましてはこれで完了済みとさせていただきます。 いろいろ丁寧に教えていただきありがとうございました。 大変感謝しております。 まだまだ勉強不足ですのでまたこの場でお世話になることがあるかもしれません。 そのときはぜひよろしくお願いいたします。 ありがとうございました。

toutetsu
質問者

補足

BLUEPIXYさん、早速のお返事ありがとうございました。 こんなにも短いスクリプトで記述できるとは驚きでした。 いろんなところのスクリプトを参考にして作ったのですがずいぶん無駄があったようです。 私は論理的思考が苦手なためJava Scriptのような言語はなかなか身につかなくて困っています。あれだけのスクリプトを作るのにも半日かかってしまいました。 > 発生したときのメッセージや場所また、ブラウザの種類なども教えてください。 あれから何度か試してみたのですが、恐らく他のスクリプトに原因があるみたいです。 このスクリプト単体ではエラーは出なくなりました。 ブラウザはIE5.0、5.5、6.0、MACIE5.2、firefoxです。 エラーが出るのは気持ち悪いのですが、特に動作に問題なければいいかなと思っています。

その他の回答 (2)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

scriptで if(document.getElementById("AA")==null){ //id="AA"はない } else { //id="AA"はある } のように判別できます

toutetsu
質問者

補足

BLUEPIXYさん、お返事が遅くなってすみません。教えていただいた条件式を元に何とか動作するように作ってみました。 希望とおりid="instock"のときはカートが使えて、id="soldout"のときはdisableになりカートが使えなくなるようになりました。 動作するので問題はないと思いますが、なぜか時々エラーが出ます。 書き方はこれであっていますでしょうか？ 書き方に問題なければ別の部分に原因があると思います。 お時間あるときにチェックしていただければ助かります。 よろしくお願いいたします。 <html> <head> <script> function stockStatus (num){ var soldout=document.getElementById("soldout"); if(document.getElementById("soldout")==null){ return false; } else { for (var i =0; i<=soldout.length -1 ;i++){ soldout.elements[i].disabled=num; } } } </script> <title></title> </head> <body onLoad="stockStatus (true)"> <form id="soldout" action="" method="POST"> <select name="color"> <option>シルバー</option><option>ゴールド</option></select> <select name="kazu"><option>1</option><option>2</option><option>3</option></select> <input type="submit" value="カートに入れる"> </form> </body> </html>

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

「<div id="AA">の時」という意味がわかりません。 formのBBをdisableにするのは以下ですが、 トリガーがAAをどうしたときなのかはっきりさせた方がよいです。 それとスタイルシートの記述を変えるというのも、 なにをどうしたいのかもっと具体的に質問なさると 回答しやすいと思いますよ。 <form> <input type="button" onClick="changeBB(true)" value="off"> <input type="button" onClick="changeBB(false)" value="on"> </form> <form id="BB"> <select name="s"> <option>select1 <option>select2 <option>select3 <option>select4 </select><br> <input type="radio" name="r" checked>radio1<br> <input type="radio" name="r">radio2<br> <input type="radio" name="r">radio3<br> <input type="radio" name="r">radio4<br> <input type="text" value="text"><br> <input type="button" value="button" onClick="alert('test')"><br> </form> <script> function changeBB(num){ var BB=document.getElementById("BB"); for (var i =0; i<=BB.length -1 ;i++){ BB.elements[i].disabled=num; } } </script>

toutetsu
質問者

補足

こんにちは、yambejpさん。早速の回答ありがとうございます。 拙い説明でご迷惑をおかけして申し訳ありません。 もう少しわかりやすいよう、質問の内容を変更/整理してみました。 勉強不足で申し訳ありませんが、何かよい方法がありましたら教えてください。 よろしくお願いします。 ■実現したい内容 フォームで商品を購入するショッピングサイトのカート。 在庫があるときは「カートに入れられる」、在庫がないときは「カートが使えない」 ■HTMLの記述 ・在庫があるとき<div id="instock">。<form id="cart">は「カートに入れられる」状態。 ・在庫がないとき手入力で<div id="soldout">と書き換える。<form id="cart">は「カートが使えない」状態（disable） ・if <div id="instock"> then formを表示。if <div id="soldout"> then formをdisable <form id="cart"> <select> <option>1</option> <option>2</option> </select> <select> <option>1</option> <option>2</option> </select> <input type="text" value="text"> <input type="button" value="button"> <div id="instock/soldout"> // 在庫有りinstock/在庫なしsoldout ・・・・ </div> <form> ■CSSの記述 ・在庫があるとき、#instock { background: url(instock.gif) no-repeat; } ・在庫がないとき、#soldout { background: url(soldout.gif) no-repeat; }

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • div要素内の全input要素をdisable

    Javascriｐｔで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を すべてdisableにしたいです。 以下でうまくいきません。どなたかお知恵を頂けないでしょうか？ よろしくお願い致します。 var input_tags = document.getElementById("div_id").getElementsByTagName("input"); for(var input_tag in input_tags) { input_tag.disabled = true; }

  • VBAでColumns("aa:bb").Select に替るコマンドを、教えて下さい

    お教え下さい　 WindowsXP下でExcel 2002 を使っている者です 　VBA命令で Excelシートを操作したいのですが、桁番号を数値で指定する方法が 判らないので、困っております 　即ち、For Next文で変数iiを使い、是で桁番号を選択したいのですが、これを使うと、 ～～～ aa=cstr(ii):bb=Cstr(ii+3) Columns("aa:bb").Select Selection.ColumnWidth = ss ～～～ とコーディングをしても、Columns("aa:bb").Select の行で Errメッセ-ジが出て 動きません 　…(Excelでは 桁番号を アルファベット番号で送っているから、当然の事ですが…) 　例えば 数値で枠を指定したい時には、Range(aa,bb)ではなくて、Cell(ii,ii+3) と言う、数値の使えるコマンドを使いますが、同様に、数値を使って桁番号を指定する場合は、何の様なコマンドを使ったら数値での指定が可能なのか、それをお教え下さい 　お願い申し上げます

  • innerhtmlで出た値から、ifで返り値を出す

    innerhtmlで出た値から、要素を判断し、if文で返り値を求めることは可能でしょうか。 具体的にはinnerhtmlで、2未満の数値が出た場合、 りんごを、4未満であればみかんと返すようにいたしたいです。 なお、回答が長くなることから、script文のみの記述でOKですが、 script文は省略なさらないでください。 <!--適当--> <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { judge(); } function selectboxChange111() { judge(); } function judge() { /* この場合は、varではなくletを使う。*/ let val101 = document.forms.form101.Select101.value; let val111 = document.forms.form111.Select111.value; /* そもそも両方が当てたら、メッセージを出すのなら、outputは1つでいいのでは？ */ let target = document.getElementById("output201"); let target2 = document.getElementById("output202"); if ((val101 == "要素101")&&(val111 == "要素111")) { target.innerText = "合っています。"; target2.innerText = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output201"></div> <div id="output202"></div> <div id="output203"></div> <div id="output204"></div> <div id="output205"></div> </body> </body> </html>

  • 質問Aと質問Bを選択して、メッセージを出したい。

    質問Aと質問Bを選択して、メッセージを出すプログラムを作っています。 ところが、functionについて、引数の場合は2つ同時に使用できますけれども、関数はできないのがネックです。 なぜそれが必要かというと、 funcの中にifが入っており、そこで、メッセージの挙動の操作をしているためです。 もし、関数を2つ同時に使うとしたらどのようにしたらいいですか。 以下はそのjavascript文です。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { var val101 = document.forms.form101.Select101.value; var target = document.getElementById("output101"); if (val101 == "要素101") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output101"></div> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output111"></div> </body> </body> </html>

  • divタグ（span）についての質問です。

    divタグ（span）についての質問です。 ふと気になったのですが、divタグ（span）の名前は必ずつけないといけないのでしょうか？（【id="任意の名前"】の部分です） ただのブロック要素としてのみ使うときには、特にスタイルシートには記述しないので、名無しでも大丈夫なのかな～？と思いまして、、、 ご存知の方いらっしゃいましたらアドバイスをいただけると幸いですm(__)m 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • プルダウンを2個選び、その結果に基づき、値を返す。

    プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。

  • 2個選択することで初めて表示というのができない

    <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (value == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // function selectboxChange11() { var value = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (value == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> ↑はjsの分ですが、 2個選んだら初めてイベントが発生するプログラムを作成しているのですが、 いかんせんうまくいきません。 恐らく、var value = document.forms.form1.Select1.value;のところで、躓いているのだと思います。 document.formsにカンマをつけてみたり、さらに、両端に[]をつけてみたり、いろいろ試しましたが、うまくいきません。 それとも、重ねること自体ができないのでしょうか。 どうしたらいいのでしょうか。

  • プルダウンのメニューを表示を2つ設定。

    プルダウンのメニューを表示を2つ設定したいのですが、 どこが間違っているのでしょうか。 基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。 間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>

  • CSSで記述した数値が取得できない

    あるdivタグのサイズを640px*480pxにしようと思い、以下のように記述しました。 （省略） <style type="text/css"> <!-- #oshiete { width: 640px; height: 480px; } //--> </style> </head> <body> <div id="oshiete"></div> （省略） その後、これをJavaScriptで動的に変化させようとしたのですが、 document.getElementById("oshiete").style.width などでの数値の取得が出来ません。 調べてみたところ、divタグに <div id="oshiete" style="width: 640px; height: 480px;"></div> と直接スタイルを記述していれば数値の取得が出来ました。 しかしスタイルシートを使う以上、タグに直接スタイルを書いていたのではせっかくの効果が発揮できません。 スタイルシートをheadタグに記述、あるいは外部CSS呼び出しを使いつつ、JavaScriptから数値を取得する方法を教えてください。 よろしくお願いします。

  • jsでプルダウンで選択したものがうまく表示されない

    以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。 これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。 どうしたら改善されますか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する