html JSでrequiredのタグを非表示切り替えたい

htmlでrequired属性のついたinputタグをJSで制御したいのですが、良い方法を教えてください。

やりたいこと

以下の入力フォーム(テーブルで整えています。)があり、ラジオボタン(A,B)より選択したフォームのみ表示したいです。注意点として入力欄Bのタグにはrequired属性のあるタグがあり、入力しないと送信できないようにしています。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <script type="text/javascript">
5    </script>
6  </head>
7
8  <body>
9    <form action="hoge" method="post">
10      <table>
11        <tr>
12          <th>切替</th>
13          <td>
14            <label>
15              <input type="radio" name="class" value="0" checked="checked">
16              Aを表示
17            </label>
18            <label>
19              <input type="radio" name="class" value="1">
20              Bを表示
21            </label>
22          </td>
23        </tr>
24        <tr>
25          <th>A</th>
26          <td><input type="text"/></td>
27        </tr>
28        <tr>
29          <th>B</th>
30          <td><input type="text" required/></td>
31        </tr>
32        <tr>
33          <td><input type="submit" value="submit"></td>
34        </tr>
35      </table>
36    </form>
37  </body>
38</html>

実装

いまのところdisplayによる表示切替制御を考えましたが、これだとブラウザで表示されないだけで、見えてなくても裏でrequiredが有効になっているみたいでした。結局表面上Aを選択したところで、Bにも入力していないといけないみたいなんで詰んでます。
以下、上記の変更箇所だけ記述

html
1// javascript
2<script type="text/javascript">
3  function toggle() {
4    var isChecked = document.getElementById("radio").checked
5    var aElems = document.getElementsByClassName("a")
6    var bElems = document.getElementsByClassName("b")
7    if (isChecked) {
8      aElems[0].style.display = ""
9      bElems[0].style.display = "none"
10      }
11    }else {
12      aElems[0].style.display = "none"
13      bElems[0].style.display = ""
14      
15    }
16  } 
17</script>
18
19// イベント
20<label>
21  <input id="radio" type="radio" name="class" value="0" checked="checked" onclick="toggle()">
22  Aを表示
23</label>
24<label>
25  <input type="radio" name="class" value="1" onclick="toggle()">
26  Bを表示
27</label>
28
29<tr class="a">
30　<th>A</th>
31　<td><input type="text"/></td>
32</tr>
33<tr class="b">
34　<th>B</th>
35  <td><input type="text" required/></td>
36</tr>

ラジオボタンをイベントハンドラとして、Aを選択したときには必須項目のBのテーブルレコードを消し去りたいのですが他に方法はないでしょうか？

補足(縛り)

応急処置として、jsのif処理の最後に
bElems[0].children[1].children[0].value="null"(Aが選択された場合)
bElems[0].children[1].children[0].value=""(Bが選択された場合)
みたいに文字列を入れてごまかすことはできますが、これだとAを選択して送信した場合、form先にBのvalueに"null"が入って送られてしまうので避けたいです。

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

回答1件

ベストアンサー

無効にしたコントロールは検証されないし、送信もされません。

JavaScript
1      aElems[0].querySelector('input').disabled = false;
2      bElems[0].querySelector('input').disabled = true;

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled

投稿2020/04/08 09:07

x_x

総合スコア13749

yay

2020/04/08 11:15

ありがとうございます！しっかりとdocumentにありましたね...。漁る癖をつけていきたいです。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！