ラジオボタン選択で「複数ラジオボタン」をアクティブにするには？

解決済

質問者：kato96
質問日時：2006/01/20 00:31
回答数：3件

■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。
（ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効）

用途はアンケートフォームです。

可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。

<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」を選択すると、ラジオボタン（カテゴリー1～4）がアクティブになる。
</td>
</tr>
<tr>
<td>
<input name="radiobutton" type="radio" value="radiobutton">はい
<input name="radiobutton" type="radio" value="radiobutton" checked>いいえ
</td>
</tr>
<tr>
<td>
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー1
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー2
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー3
<input name="radiobutton" type="radio" value="radiobutton">カテゴリー4
</td>
</tr>
</table>
</form>

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： yambejp
回答日時：2006/01/20 13:57

カテゴリーが違うのに同じ名前を使うと使い勝手が悪いです

＃１さんのようにわけてかくといいですね。
こんな感じで、オブジェクトを引数で渡すと比較的
ローレベルのjavascriptで動作します。

<script language="javascript">
function changeRadio(num1,num2){
var f=num1.form
for(var i=0;i<f.length;i++){
if (f.elements[i].name==num2) f.elements[i].disabled=((num1.value=="yes")?false:true)
}
}
</script>
<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」を選択すると、ラジオボタン（カテゴリー1～4）がアクティブになる。
</td>
</tr>
<tr>
<td>
<input name="radioSelect" type="radio" value="yes" onclick="changeRadio(this,'radiocategory')">はい
<input name="radioSelect" type="radio" value="no" checked onclick="changeRadio(this,'radiocategory')">いいえ
</td>
</tr>
<tr>
<td>
<input name="radiocategory" type="radio" value="category1" disabled>カテゴリー1
<input name="radiocategory" type="radio" value="category2" disabled>カテゴリー2
<input name="radiocategory" type="radio" value="category3" disabled>カテゴリー3
<input name="radiocategory" type="radio" value="category4" disabled>カテゴリー4
</td>
</tr>
</table>
</form>

- 0
- 件

通報する

No.2

回答者： papillon68
回答日時：2006/01/20 11:49

kato96さんこんにちは、papillon68と申します。

入力可/不可の切替えはBLUEPIXYさんのサンプルであるように「disabled」を使います。(enabledの操作のイメージ)

ラジオボタンの他にも
「テキスト」、「チェックボックス」、「プルダウン」、「ボタン」などでも行えます。

参考URLで入力可/不可を切り替えるサンプルが掲載されています。

また、参考サイトではその他にも色々なサンプルがあるので役立つかもしれません(@＾－＾@)

参考URL：http://05xx.sub.jp/javascript/sample/sample06_di …

- 0
- 件

通報する

No.1

回答者： BLUEPIXY
回答日時：2006/01/20 04:37

こんな感じでどうでしょう

----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>Sample</title>
<style>

</style>
<script type="text/javascript">

</script>
</head>
<body>
<form name="form2" method="post" action="">
<table>
<tr>
<td>■「はい」を選択すると、ラジオボタン（カテゴリー1～4）がアクティブになる。
</td>
</tr>
<tr>
<td>
<input name="radioSelect" type="radio" value="yes" onclick="activate('radiocategory')">はい
<input name="radioSelect" type="radio" value="no" checked onclick="disable('radiocategory')">いいえ
</td>
</tr>
<tr>
<td>
<input name="radiocategory" type="radio" value="category1" disabled>カテゴリー1
<input name="radiocategory" type="radio" value="category2" disabled>カテゴリー2
<input name="radiocategory" type="radio" value="category3" disabled>カテゴリー3
<input name="radiocategory" type="radio" value="category4" disabled>カテゴリー4
</td>
</tr>
</table>
</form>
</body>
</html>