プロが教える店舗＆オフィスのセキュリティ対策術

リセットボタンでクリアできない（初期の状態に戻らない）のですが・・・

解決済

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

宜しくお願いします。

フォームの入力チェックで、「ある項目(ラジオボタン)を選択した場合、次のテキストボックスを入力不可にする」という動きをjavascriptでさせています。
しかし、フォームのリセットボタンをクリックした際に、選択したラジオボタンはクリアできるのですが、テキストボックスの状態をクリアすることが出来ません。

ちなみに、動きの詳細は以下の通りです。
1.ラジオボタン「ケースA」を選択すると…
2.テキストボックスが入力不可となり、テキストボックスの背景色がグレーになる
3.「ケースB」「ケースC」を選択すると入力可でテキストボックス背景色は赤になる
4.いずれかを選択した状態でリセットボタンをクリックすると…
5.ラジオボタンはリセットされるが、背景色は残ったまま
6.リセットボタンを再度クリックすると、テキストボックスは全てがクリアされた状態（入力可・背景色白）に戻る
このような感じです。

現在のソースは以下の通りですが、どのようにしたらよいでしょうか？
（javascriptは得手では無いので、本来ならもっと簡略できるのかもしれませんが、ご了承ください。m(__)m）

[JAVASCRIPTソース]
function DisAble() {
　if(document.input.case[0].checked == true ) {
　　document.input.text1.disabled = true;
　　document.input.text1.style.backgroundColor='#cccccc';
　　return false;
　} else if ((document.input.case[1].checked == true ) || (document.input.case[2].checked == true )){
　　document.input.text1.disabled = false;
　　document.input.text1.style.backgroundColor='#ff0000';
　　return false;
　} else {　// リセットボタンを2回クリックするとようやく以下の設定になる。
　　document.input.text1.disabled = false;
　　document.input.text1.style.backgroundColor='#ffffff';
　　return false;
　}
}


[HTMLソース]
<body>
　<form name="form1">
　<!-- ラジオボタン -->
　　<input type="radio" name="case" value="A" onClick="DisAble()">ケースA（入力不可）
　　<input type="radio" name="case" value="B" onClick="DisAble()">ケースB（入力可）
　　<input type="radio" name="case" value="C" onClick="DisAble()">ケースC（入力可）
　　
　　<!-- テキストボックス -->
　　<input type="text" name="text1">

　　<!-- 送信・リセットボタン -->
　　<input type="submit" value="送信">
　　<input type="reset" value="リセット" onClick="DisAble()">

　</form>
</body>


以上です。分かりづらい説明で申し訳ございませんが、どなたか、どうぞお知恵をお願いいたします。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： redfox63
  • 回答日時：

関数DisAbleを引数つきにして 場合分けすればいいのでは



function DisAble(n) {
　　if( n == 1 ) {
　　　　// ケースA
　　　　document.input.text1.disabled = true;
　　　　document.input.text1.style.backgroundColor='#cccccc';
　　　　// return false;
　　} else if ( (n == 2 ) || (n == 3 )){
　　　　// ケースB or ケースC
　　　　document.input.text1.disabled = false;
　　　　document.input.text1.style.backgroundColor='#ff0000';
　　　　// return false;
　　} else {　// リセットボタンを2回クリックするとようやく以下の設定になる。
　　　　document.input.text1.disabled = false;
　　　　document.input.text1.style.backgroundColor='#ffffff';
　　　　// return false;
　　}
　　return true;
}

呼び出し側を
　　<input type="radio" name="case" value="A" onClick="return DisAble(1);">ケースA（入力不可）
　　<input type="radio" name="case" value="B" onClick="return DisAble(2);">ケースB（入力可）
　　<input type="radio" name="case" value="C" onClick="return DisAble(3);">ケースC（入力可）
　　
　　<!-- テキストボックス -->
　　<input type="text" name="text1">

　　<!-- 送信・リセットボタン -->
　　<input type="submit" value="送信">
　　<input type="reset" value="リセット" onClick="return DisAble(0);">

といった具合に return DisAble( 0 ); などといった具合にします
関数からの戻り値を受ける場合は return付きで記述しましょう

ラジオボタンのonClickで falseが返されるとクリックされなかったことになります つまり状態の変化が起きないことになります
リセットボタンののonClickでfalseが返されるとこちらもクリックされていないことになり ラジオボタンのリセットもされません

returnなしで関数を設定すると 関数からの戻り値は無視されるともいます

この回答への補足

ご回答ありがとうございます。
早速、試させていただきました。思ったとおりに動きました！
ありがとうございます。

ただ、もし可能なら…なのですが…
リセットではなく再読み込みした場合なのですが、ボタンの選択情報は残るのですが、背景色や入力設定がリセットされてしまいます。
これは致し方ないことなのでしょうか？
もし、可能なら再読み込みでリセットされない方法はありますでしょうか？
何か御存知でしたらご教示ください。
宜しくお願い申し上げます。

補足日時：2008/08/07 10:44
通報する
    • good
    • 1
    • 件
通報する

No.4

  • 回答者： redfox63
  • 回答日時：

bodyタグのonloadイベントを処理してやればいいように思います



<body onload="return myDisable();">
などとしておいて

function myDisable()
{
　　if ( document.input.case[0].checked ) {
　　　　return DisAble( 1 );
　　} else if ( ( document.input.case[1].checked ) ||
　　　　　　　　(document.input.case[2].checked ) ) {
　　　　return DisAble( 2 );
　　} else {
　　　　return DisAble( 0 );
　　}
　　return true;
}
といった具合にしてやればいいと思います
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど、どうもありがとうございました。
やってみます。

おかげ様でどうにかなりました。
本当にありがとうございました。m(__)m

通報する
お礼日時：2008/08/08 16:54

No.3

  • 回答者： _pipi_
  • 回答日時：

やりなおし


<html>
<script>
function re2(){
o=document.getElementsByName('case2');
for(i=0;i<o.length;i++) if(o[i].checked){
for(j=0;j<o.length;j++) o[j].checked=false;
return;
}
tx(false,'');
document.getElementById('tx1').value='';
}
function tx(f,c){
with(document.getElementById('tx1')){ disabled=f; style.backgroundColor=c; }
}

</script>
<body>
<form name="form1">
<input type="radio" name="case2" value="A" onClick="tx(true,'#ccc')">ケースA（入力不可）
<input type="radio" name="case2" value="B" onClick="tx(false,'#f00')">ケースB（入力可）
<input type="radio" name="case2" value="C" onClick="tx(false,'#f00')">ケースC（入力可）

<input type="text" name="text1" id="tx1">

<input type="submit" value="送信">
<input type="button" value="リセット" onClick="re2()">

</form>
</body></html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただきありがとうございます。
大変勉強になりました。
今回、他の条件との兼ね合いもあり、使用は出来なかったのですが、
ぜひとも今後の参考にさせていただきます。

本当にありがとうございました。m(__)m

通報する
お礼日時：2008/08/07 10:43

No.2

  • 回答者： _pipi_
  • 回答日時：

<html>


<script>
function re2(){
o=document.getElementsByName('case2');
for(i=0;i<o.length;i++) if(o[i].checked) return true;
tx(false,''); return false;
}
function tx(f,c){
with(document.getElementById('tx1')){ disabled=f; style.backgroundColor=c; }
}

</script>
<body>
<form name="form1">
<input type="radio" name="case2" value="A" onClick="tx(true,'#ccc')">ケースA（入力不可）
<input type="radio" name="case2" value="B" onClick="tx(false,'#f00')">ケースB（入力可）
<input type="radio" name="case2" value="C" onClick="tx(false,'#f00')">ケースC（入力可）

<input type="text" name="text1" id="tx1">

<input type="submit" value="送信">
<input type="reset" value="リセット" onClick="return re2()">

</form>
</body></html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
なるほど、大変参考になりました。
ありがとうございました！

通報する
お礼日時：2008/08/27 17:24

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

Q質問する（無料）

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

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

Q質問する（無料）

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

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

おすすめ情報