セレクトボックスを使用した、フォームのアクティブ・非アクティブの切り替え

質問

セレクトボックス（A）を使用して、（A）の選択結果により（A）以降をアクティブ・非アクティブに切り替えたいのです。
アクティブ・非アクティブの切り替え自体は正常に動くのですが、一度「送信する」をクリックした後、次の画面に移動し、その後「戻る」をクリックorブラウザの戻るで元のページに戻ると、アクティブ化できていたセレクトボックス（C）が全て非アクティブとなってしまっているのです。
原因は何でしょうか？よろしくお願いいたします。

function setTF() {

n = document.mail.Data.selectedIndex;
flag = eval(document.mail.Data.options[n].value);
document.mail["B"].disabled = flag;
document.mail["C"].disabled = flag;

}

※以下HTML※
<form action="mail.cgi" method="post" name="mail">
<table>
<tr>
<th>セレクトボックス（A）</th>
<td><select name="Data" onchange="setTF()">
<option value="false">アクティブ</option>
<option value="true" selected="selected">非アクティブ</option>
</select></td>
</tr><tr>
<th>テキスト（B）</th>
<td><input size="4" type="text" name="B" disabled="disabled" /> 才</td>
</tr><tr>
<th>セレクトボックス（C）</th>
<td><select name="C" disabled="disabled">
<option>選択肢1</option>
<option>選択肢2</option>
</select></td>
</tr><tr>
<td colspan="2" class="submit"><input type="submit" value="送信する" /><input type="reset" value="リセット" /></td>
</tr>
</table>
</form>

回答No.3

yambejp · ベストアンサー

「戻る」というのはブラウザの仕様によってだいぶ違いますね。
前も同様の質問があがっていましたが、IEは戻るときもある程度
リロードされます。なのでonloadで処理すればよいでしょう。
(firefoxはキャッシュを読んでくれるようなのでonloadは無視してくれます）

したがって#1さんの処理に近くなりますが、onload時にfunctionを指定する
ならかっこをつけてはいけません。
window.onload = setTF()→window.onload = setTF

それとformのnameはすでに非推奨になっているので、idで管理した方が
よいでしょう。総じてこんな感じ

<script>
function setTF() {
var f=document.getElementById('mail');
var flag = f.Data.value==""?false:true;
f.B.disabled = flag;
f.C.disabled = flag;
}
window.onload=setTF;
</script>

<form method="post" id="mail">
<table>
<tr>
<th>セレクトボックス（A）</th>
<td><select name="Data" onchange="setTF()">
<option value="">アクティブ</option>
<option value="non-active" selected>非アクティブ</option>
</select></td>
</tr><tr>
<th>テキスト（B）</th>
<td><input size="4" type="text" name="B" disabled /> 才</td>
</tr><tr>
<th>セレクトボックス（C）</th>
<td><select name="C" disabled>
<option>選択肢1</option>
<option>選択肢2</option>
</select></td>
</tr><tr>
<td colspan="2" class="submit"><input type="submit" value="送信する" /><input type="reset" value="リセット" /></td>
</tr>
</table>
</form>

お礼

ありがとうございます。
お教えいただいたとおりに設定したところ、問題は解決いたしました。

回答No.2

auty

<form>タグの設定が優先されるようです。

そこで、<input><select>タグから　
　　　disabled="disabled"
を取り除き、onloadプロパティを追加したらどうでしょう。

-------------------------------------------------------------
onload=function() {
// alert(document.mail.Data.selectedIndex);
if (document.mail.Data.selectedIndex==1) {
document.mail["B"].disabled = true;
document.mail["C"].disabled = true;
}
}

-------------------------------------------------------------
セレクトボックス（A）が非アクティブのときのみ、無効にします。

お礼

ありがとうございました。

回答No.1

redfox63

IE6では現象が起きないようです …

window.onload = setTF();
などを埋め込んでおいて ページがロードされた段階でdisable属性をセットするようにしてみてはいかがでしょう

お礼

ありがとうございました。