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

「の時」という意味がわかりません。 formのBBをdisableにするのは以下ですが、トリガーがAAをどうしたときなのかはっきりさせた方がよいです。それとスタイルシートの記述を変えるというのも、なにをどうしたいのかもっと具体的に質問なさると回答しやすいと思いますよ。 select1 select2 select3 select4 radio1 radio2 radio3 radio4 function changeBB(num){ var BB=document.getElementById("BB"); for (var i =0; i

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

解決済

質問者：toutetsu
質問日時：2005/09/15 15:34
回答数：3件

▼次のようにページ内のdivタグのidの名前によって、formタグ内の要素をdisableにすることはJava scriptによって可能でしょうか？

<div id="AA">のとき、別の場所にある<form id="BB">内のselect要素などすべての要素をdisableにする。

また同時に、id="BB"に指定したスタイルシートの記述を書き換えることは可能でしょうか？

何かよい方法をご存知でしたら教えてください。よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： BLUEPIXY
回答日時：2005/09/18 01:55

>なぜか時々エラーが出ます。

ウチでちょっと試した程度ではエラーが発生しませんでした。
できましたら、発生したときのメッセージや場所また、ブラウザの種類なども教えてください。

以下は、予防的な意味での注意点についてちょっと書きます。
＞return false;

は、必要ないです。
書かない方がいいと思います。
==nullの場合の処理が必要ないなら
!=nullにすればよいです。
もしくは
return false;でなくて
;
のように空文でもよいです。
あと、idに使っている名前と同じ名前を変数名として使わない方が良いです。
つまり、
id="soldout"の時に
var soldout;という風にはしない方が良いです。
同じでなければ、cartFormでもなんでもかまいません。
あと、scriptは、

のように

で囲むようにします。

getElementById
は、ブラウザやのブラウザのバージョンによっては使えないことがあります。
その場合は、使えるかどうかを調べる必要があります。

<script type="text/javascript">

</script>

この回答への補足

BLUEPIXYさん、早速のお返事ありがとうございました。
こんなにも短いスクリプトで記述できるとは驚きでした。
いろんなところのスクリプトを参考にして作ったのですがずいぶん無駄があったようです。
私は論理的思考が苦手なためJava Scriptのような言語はなかなか身につかなくて困っています。あれだけのスクリプトを作るのにも半日かかってしまいました。

> 発生したときのメッセージや場所また、ブラウザの種類なども教えてください。

あれから何度か試してみたのですが、恐らく他のスクリプトに原因があるみたいです。
このスクリプト単体ではエラーは出なくなりました。
ブラウザはIE5.0、5.5、6.0、MACIE5.2、firefoxです。
エラーが出るのは気持ち悪いのですが、特に動作に問題なければいいかなと思っています。

補足日時：2005/09/18 18:50

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2005/09/19 13:18

No.2

回答者： BLUEPIXY
回答日時：2005/09/16 03:05

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>

補足日時：2005/09/18 01:29

通報する

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2005/09/15 17:21

「<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; }