ラジオボタンによる有効なボタンの切り替えについて

解決済

質問者：siglam
質問日時：2011/02/01 13:03
回答数：2件

はじめまして。
下記のような機能を実装したいと思っています。
どなたか教えていただけませんでしょうか？

<html>
<head>
<title>サンプル</title>
</head>

<input type="radio" name="radio1" value="a">A
<input type="radio" name="radio1" value="b">B
<input type="radio" name="radio1" value="c">C
<input type="radio" name="radio1" value="x">全部ダメ
<br><br>

<input type="button" value="Aボタン">
<input type="button" value="Bボタン">
<input type="button" value="Cボタン">

</body>
</html>

ラジオの「A」を選択すると「Aボタン」のみ有効で他は無効（disabled）になり
「B」を選択すると「Bボタン」のみ有効というように、
選択したラジオボタンの値と有効なボタンを連動させたいのです。
さらに、ラジオの「全部ダメ」を選択すると全てのボタンを無効としたいです。

ラジオボタンの値の取得のjavascriptなど個々の機能について調べてみたりしたのですが
どのように組み合わせれば、機能を実現できるのかわかりませんでした。

お手数ですが、ご教示いただけますでしょうか。。
可能ならばソースのサンプルをいただけるとありがたいのですが。
どうぞよろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (2件)

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

No.1ベストアンサー

回答者： LancerVII
回答日時：2011/02/01 14:31

こんにちは。

こんな感じでどうでしょうか。
もうちょっと工夫すれば汎用性を持たせることが出来ますがこんな方法がありますということで。
他にもいろいろ書き方がありますのでその辺は応用利かせてみてください。

動きの説明
1.HTMLの属性で全てボタンをdisable
2.ラジオがクリックされた際にsetButtonへdisableを解除するボタンの名称を渡す
3.一度全てのボタンをdisableする(リセットの意)
4.2で渡されたボタンのみdisableをfalse(その前の条件はetButtonに値が来なかったとき=全てダメ)

<html>
<head>
<title>TEST</title>
<script type="text/javascript">

</script>
</head>
<body>
<form name="frmTest">
<input type="radio" name="radio1" value="a" onclick="setButton('btnA');">A
<input type="radio" name="radio1" value="b" onclick="setButton('btnB');">B
<input type="radio" name="radio1" value="c" onclick="setButton('btnC');">C
<input type="radio" name="radio1" value="x" onclick="setButton();">全部ダメ
<br><br>
<input type="button" value="Aボタン" name="btnA" disabled>
<input type="button" value="Bボタン" name="btnB" disabled>
<input type="button" value="Cボタン" name="btnC" disabled>
</form>
</body>
</html>