- ベストアンサー
<div id="AA">の時、<form id="BB">内のselect要素などすべての要素をdisableにしたい。
▼次のようにページ内のdivタグのidの名前によって、formタグ内の要素をdisableにすることはJava scriptによって可能でしょうか？ <div id="AA">のとき、別の場所にある<form id="BB">内のselect要素などすべての要素をdisableにする。 また同時に、id="BB"に指定したスタイルシートの記述を書き換えることは可能でしょうか？ 何かよい方法をご存知でしたら教えてください。よろしくお願いいたします。
- toutetsu
- お礼率35% (25/71)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （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>
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
scriptで if(document.getElementById("AA")==null){ //id="AA"はない } else { //id="AA"はある } のように判別できます
補足
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)
「<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>
補足
こんにちは、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; }
お礼
補足に掲載したURLの掲載がgooの規約に反し、記載内容ががシステム側より修正さましたので、この件につきましてはこれで完了済みとさせていただきます。 いろいろ丁寧に教えていただきありがとうございました。 大変感謝しております。 まだまだ勉強不足ですのでまたこの場でお世話になることがあるかもしれません。 そのときはぜひよろしくお願いいたします。 ありがとうございました。
補足
BLUEPIXYさん、早速のお返事ありがとうございました。 こんなにも短いスクリプトで記述できるとは驚きでした。 いろんなところのスクリプトを参考にして作ったのですがずいぶん無駄があったようです。 私は論理的思考が苦手なためJava Scriptのような言語はなかなか身につかなくて困っています。あれだけのスクリプトを作るのにも半日かかってしまいました。 > 発生したときのメッセージや場所また、ブラウザの種類なども教えてください。 あれから何度か試してみたのですが、恐らく他のスクリプトに原因があるみたいです。 このスクリプト単体ではエラーは出なくなりました。 ブラウザはIE5.0、5.5、6.0、MACIE5.2、firefoxです。 エラーが出るのは気持ち悪いのですが、特に動作に問題なければいいかなと思っています。