ラジオボタンでのチェックの状態で入力フォームを入力可否にすることで困っています

前提・実現したいこと

ラジオボタンでの選択肢の中にその他という項目を作り
チェック状態によって入力可否にしたいのですがページ開いた状態では入力不可になっているもののチェックを外す（他の選択肢にチェックを入れる）と入力可能状態のままになってしまっています

発生している問題・エラーメッセージ

上記ですがページ開いた状態では入力不可になっているもののチェックを外す（他の選択肢にチェックを入れる）と入力可能状態のままになってしまっています

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <title>test1</title>
7  <meta name="description" content="サイトの説明文">
8
9  <style>
10    /*チェック入れないと灰色*/
11    input.checkbox+label {
12      color: #C0C0C0;
13    }
14
15    /*チェック入れると黒*/
16    input.checkbox:checked+label {
17      color: #000000;
18    }
19
20    /*チェック入れないと灰色*/
21    input.radio+label {
22      color: #C0C0C0;
23    }
24
25    /*チェック入れると黒*/
26    input.radio:checked+label {
27      color: #000000;
28    }
29
30    body {
31      font-size: 12px;
32      background-color: rgb(224, 232, 237)
33    }
34
35    table {
36      background-color: #FFFFFF
37    }
38  </style>
39
40  <script>
41    function connecttext(textid, ischecked) {
42      if (ischecked == true) {
43        // チェックが入っていたら有効化
44        document.getElementById(textid).disabled = false;
45      } else {
46        // チェックが入っていなかったら無効化
47        document.getElementById(textid).disabled = true;
48      }
49    }
50
51    function connecttext(textid, ischecked) {
52      // チェック状態に合わせて有効・無効を切り替える
53      document.getElementById(textid).disabled = !ischecked;
54    }
55    window.onload = function() {
56      document.getElementById("その他%").disabled = true;
57    }
58  </script>
59</head>
60
61<body>
62
63  <table border>
64
65    <tr>
66      <td align="left" valign="top" colspan="3"><input type="radio" name="%" class="radio" value="5%"><label>5%</label></td>
67      <td align="left" valign="top"><input type="radio" name="%" class="radio" value="7%"><label>7%</label></td>
68      <td align="left" valign="top"><input type="radio" name="%" class="radio" value="11%"><label>11%</label></td>
69      <td align="left" valign="top" colspan="2"><input type="radio" name="%" class="radio" onclick="connecttext('その他%',this.checked);"><label>その他(<input type="text" name="othertext" id="その他%"
70          value="">%)</label></td>
71    </tr>
72
73  </table>
74</body>
75
76</html>
77

試したこと

参考にしたサイト様
チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2019/08/06 02:49

function connecttext がもう一式<style></style>の中に入っていますがこれは実際のコードもそうなっていますか？

WGAC

2019/08/06 02:51

入ってますね修正しておきます

m.ts10806

2019/08/06 02:52

というかconnecttextが三か所あるのは、結局どれを使いたいんですか？

WGAC

2019/08/06 02:58

両方とりあえず入れてる感じでしたとりあえず現状すべてのラジオボタンにonclick入れてみて、解決したので addEventListener()が理解したら変更してみます

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

回答2件

ベストアンサー

connecttext()がその他のonclickによってしか実行されていないからですね。

全てのラジオボタンに入れても良いですが、若干コードとしては非効率ですし、
addEventListener()によって全ラジオボタンにイベント付与し、チェックされたラジオボタンの値がその他のものかどうかで判断してはどうでしょうか。

投稿2019/08/06 02:51

m.ts10806

総合スコア80850

WGAC

2019/08/06 02:59

addEventListener()というものについて調べてみます回答ありがとうございます

m.ts10806

2019/08/06 03:07

nameとかidについても正規化する必要はあると思います。

WGAC

2019/08/06 03:13

正規化？とはどんなことですか？

m.ts10806

2019/08/06 03:14

基本的に数値はじまりや記号はNGです。

WGAC

2019/08/06 03:18

ありがとうございますちなみに日本語はセーフでしょうか？

m.ts10806

2019/08/06 03:20

Webをするのであれば文書以外で全角は避けたほうが良いです。 https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad

WGAC

2019/08/06 03:29

英語嫌いな私にとっては生きづらい世界ですね・・・ありがとうございます

m.ts10806

2019/08/06 03:33

プログラミング言語のドキュメントの原文はほとんどが英語です。とはいえ、命名なので別に難しい単語を選ぶ必要はなくて、中学生英語で出てこないような難しそうなものはローマ字表記でも良いと思います。

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

ちょっと命題が理解できないところがありますがこんな感じ

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  [].forEach.call(document.querySelectorAll('[name=r1]'),x=>{
4    x.addEventListener('change',e=>{
5      var idx=[].indexOf.call(document.querySelectorAll('[name=r1]'),e.target);
6      var flg=idx==document.querySelectorAll('[name=r1]').length-1;
7      document.querySelector('[name=othertext]').disabled=!flg;
8    });
9  });
10});
11</script>
12<table border>
13    <tr>
14      <td align="left" valign="top" colspan="3"><label><input type="radio" name="r1" value="5%">5%</label></td>
15      <td align="left" valign="top"><label><input type="radio" name="r1" value="7%">7%</label></td>
16      <td align="left" valign="top"><label><input type="radio" name="r1" value="11%">11%</label></td>
17      <td align="left" valign="top" colspan="2"><label><input type="radio" name="r1"  >その他(<input type="text" name="othertext" disabled value="">%)</label></td>
18    </tr>
19</table>
20
21