複数のフォーム全て入力されたらボタンを活性化したい

やりたいこと

ラジオボタンのチェックによって、フォームやボタンの動作を変えたいです。

①ラジオボタン【すべて】を選択したときは、日時選択のフォーム２つは非活性、ボタンは最初から活性
②ラジオボタン【日時指定】を選択したときは、日時選択のフォームは活性化、２つのフォームで日付を入力したらボタンを活性化させたいです。

わからないこと

上記②の、『２つのフォームで日付を入力したらボタンを活性化させる』部分がわかりません。

試したこと

下記を追加してみたのですが、「すべて」にチェックが入っている時でも日付が選択できてしまい希望している動きになりませんでした。

      if (document.getElementById('term01').value.length == 0 && document.getElementById('term02').value.length == 0) {
      document.getElementById('btn').disabled = true;
      } else {
      document.getElementById('btn').disabled = false;

現状は下記の状態です。

html
1
2<head>
3  <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
4</head>
5-----------------中略-------------------
6  <main>
7  <ul class="radioContent">
8    <li><label><input type="radio" class="radioInput" name="選択項目" value="すべて" onClick="all_cases();" checked><span class="radioInput__text">すべて</span></label></li>
9    <li><label><input type="radio" class="radioInput" name="選択項目" value="日時指定" onClick="term();"><span class="radioInput__text">日時指定</span></label></li>
10  </ul>
11
12    <ul class="inputContent">
13      <li class="title">日時選択</li>
14      <li class="inputContent">
15        <div class="flatpickr" id="flatpickr01" data-id="strap01">
16          <input type="text" id="term01" placeholder="年/月/日" data-input>
17          <a class="input-button" data-toggle></a>
18        </div>
19        <p class="term">～</p>
20        <div class="flatpickr" id="flatpickr02" data-id="strap02">
21          <input type="text" id="term02" placeholder="年/月/日" data-input>
22          <a class="input-button" data-toggle></a>
23        </div>
24      </li>
25    </ul>
26
27    <div class="btnArea">
28      <button type="button" id="btn" class="button">ボタン</button>
29    </div>
30  </main>
31
32  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
33  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
34  <script>
35    flatpickr.localize(flatpickr.l10ns.ja);
36    flatpickr.l10ns.default.firstDayOfWeek = 1; // Monday
37    const config = {
38      dateFormat: "Y/m/d",
39      wrap: true
40    }
41    flatpickr('.flatpickr', config);
42  </script>
43-----------------略-------------------
44

javascript
1    window.addEventListener('load', function() {
2      document.getElementById('btn').disabled = false;
3      document.getElementById('term01').disabled = true;
4      document.getElementById('term02').disabled = true;
5    })
6    function all_cases() {
7      document.getElementById('btn').disabled = false;
8      document.getElementById('term01').disabled = true;
9      document.getElementById('term02').disabled = true;
10    }
11    function term() {
12      document.getElementById('btn').disabled = true;
13      document.getElementById('term01').disabled = false;
14      document.getElementById('term02').disabled = false;
15 if (document.getElementById('term01').value.length == 0 && document.getElementById('term02').value.length == 0) {
16      document.getElementById('btn').disabled = true;
17      } else {
18      document.getElementById('btn').disabled = false;
19    }

css
1    main {
2      width: 600px;
3    }
4    li {
5      list-style: none;
6    }
7    .radioContent,
8    .inputContent {
9      display: flex;
10      align-items: center;
11    }
12    .title {
13      padding-right: 20px;
14      font-weight: bold;
15    }
16    .btnArea {
17      text-align: center;
18    }
19    .term {
20      padding: 0 10px;
21    }
22    #btn {
23      padding: 5px 40px;
24      background: red;
25      border: none;
26      border-radius: 10px;
27      color: #fff;
28      cursor: pointer;
29      transition: all .3s ease;
30    }
31    #btn:hover {
32      opacity: 0.7;
33    }
34    #btn:disabled {
35      background: #ccc;
36      pointer-events: none;
37    }

教えて頂けませんでしょうか。よろしくお願いいたします。

int32_t

2021/03/16 08:20 編集

最初のJavaScriptコードはどこに書いてありますか? 何かの関数の中ですか?

pondering

2021/03/16 08:24

最初のJavaScriptは、 function term() {}の箇所に記載をして試しました。質問内容の、【JavaScript】のコードを変更いたしました。

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

回答1件

ベストアンサー

ラジオボタンにonclickを直書きするのはやめて、こんな感じで

javascript
1document.addEventListener('change',e=>{
2  var flg1=document.querySelector('[name="選択項目"]:checked').value=="すべて";
3  var flg2=document.querySelector('[name="選択項目"]:checked').value=="日時指定" &&
4    [...document.querySelectorAll('#term01,#term02')].map(x=>x.value).includes("");
5  document.querySelectorAll('.flatpickr input').forEach(x=>{
6    x.disabled=flg1;
7  });
8  document.querySelector('#btn').disabled=flg2;
9});