特定のラジオボタンだけテキスト入力欄を有効化　複数

「特定のラジオボタンだけテキスト入力欄を有効化」を複数設置したいと思っています
単体で使用することは問題なくできたのですが同じようなものをもう一つ設置すると
上のラジオボタンを押しても下の方のテキスト入力欄が有効化されてしまいます。
Javascriptのidは変えているのですがダメでした。

javascriptを2か所で使用するときにはどのようにすればできるのでしょうか？
ご教示いただけますでしょうか、よろしくお願いいたします。

Javascript
1<script>
2function check(flg){
3document.getElementById("new_tag").disabled=flg;
4}
5</script>
6<tr>
7<th rowspan="4" scope="row">タグ選択</th>
8<td>P ：<input type="radio" name="tag" value="001" onClick="check(true)">001</td></tr>
9<tr><td>Z ：<input type="radio" name="tag" value="002" onClick="check(true)">002</td></tr>
10<tr><td>S ：<input type="radio" name="tag" value="003"onClick="check(true)">003</td></tr>
11<tr><td>新：<input type="radio" name="tag" value=""onClick="check(false)">新規<input type="text" name="new_tag" id="new_tag" disabled></td>
12</tr>
13
14
15<script>
16function check(flg){
17document.getElementById("new_category").disabled=flg;
18}
19</script>
20<tr>
21<th  rowspan="4" scope="row">カテゴリー選択</th>
22<td>P ：<input type="radio" name="category" value="101" onClick="check(true)">101</td></tr>
23<tr><td>Z ：<input type="radio" name="category" value="102" onClick="check(true)">102</td></tr>
24<tr><td>S ：<input type="radio" name="category" value="103"onClick="check(true)">103</td></tr>
25<tr><td>新：<input type="radio" name="category" value=""onClick="check(false)">新規<input type="text" name="new_category" id="new_category" disabled></td>
26</tr>
27
28

行動規範の内容に同意します

回答2件

ベストアンサー

2箇所で行うのであれば、以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<table>
9    <tr>
10        <th rowspan="4" scope="row">タグ選択</th>
11        <td>
12            <label>
13                P ：
14                <input type="radio" name="tag" value="001" onClick="check1(true)">
15                001
16            </label>
17        </td>
18    </tr>
19    <tr>
20        <td>
21            <label>
22                Z ：
23                <input type="radio" name="tag" value="002" onClick="check1(true)">
24                002
25            </label>
26        </td>
27    </tr>
28    <tr>
29        <td>
30            <label>
31                S ：<input type="radio" name="tag" value="003" onClick="check1(true)">
32                003
33            </label>
34        </td>
35    </tr>
36    <tr>
37        <td>
38            <label>
39                新：
40                <input type="radio" name="tag" value="" onClick="check1(false)">
41            </label>
42            <label>
43                新規
44                <input type="text" name="new_tag" id="new_tag" disabled>
45            </label>
46        </td>
47    </tr>
48</table>
49<script>
50    function check1(flg) {
51        document.getElementById("new_tag").disabled = flg;
52    }
53</script>
54<table>
55    <tr>
56        <th rowspan="4" scope="row">カテゴリー選択</th>
57        <td>
58            <label>
59                P ：<input type="radio" name="category" value="101" onClick="check2(true)">
60                101
61            </label>
62        </td>
63    </tr>
64    <tr>
65        <td>
66            <label>
67                Z ：<input type="radio" name="category" value="102" onClick="check2(true)">
68                102
69            </label>
70        </td>
71    </tr>
72    <tr>
73        <td>
74            <label>S ：
75                <input type="radio" name="category" value="103" onClick="check2(true)">
76                103
77            </label>
78        </td>
79    </tr>
80    <tr>
81        <td>
82            <label>新：
83                <input type="radio" name="category" value="" onClick="check2(false)">
84            </label>
85            <label>新規
86                <input type="text" name="new_category" id="new_category" disabled>
87            </label>
88        </td>
89    </tr>
90</table>
91<script>
92    function check2(flg) {
93        document.getElementById("new_category").disabled = flg;
94    }
95</script>
96</body>
97</html>

投稿2017/04/27 16:40

s8_chu

総合スコア14731

efu_akio

2017/04/27 22:55

check1、check2で区分けするのですね勉強になりました詳細なコードもありがとうございます！

行動規範の内容に同意します

下記コードでは関数名check が上書きされてしまいます。別の名前にすれば動くと思いますよ。

HTML
1<script>
2function check(flg){
3document.getElementById("new_tag").disabled=flg;
4}
5</script>
6<script>
7function check(flg){
8document.getElementById("new_category").disabled=flg;
9}
10</script>