disabledの制限と解除 Javascript formの記入連動

Question

主にJavascriptに関する質問です。

可動させたい内容として、
text、email、checkboxを、すべて記入(checkboxは1個チェックで可)すると、
送信の、disabledが解除される、といった内容です。

以下プログラミングですが、
どうにも目立つバグが２つあります。

１、一度記入やチェックしたものを削除しても、disabled（送信無効）に戻らない。

２、順番的にcheckboxを先に選ぶと、text、email、を記入しても、disabledが解除されない。

バグ箇所の修正など、可動可能なJavascriptの解答のほど、よろしくお願いします。

<form action="" method="POST">
<input type="text" id="txt" name="aaa" required onchange="manage(this)" />
<input type="email" id="ama" name="email" required onchange="manage(this)"/><br>

<label><input type="checkbox" name="sample[]" value="1" onchange="manage(this)">選択肢1</label><br>
<label><input type="checkbox" name="sample[]" value="2" onchange="manage(this)">選択肢2</label><br>
<label><input type="checkbox" name="sample[]" value="3" onchange="manage(this)">選択肢3</label><br>
<label><input type="checkbox" name="sample[]" value="4" onchange="manage(this)">選択肢4</label><br>

<input type="submit" id="sager" value="送信" disabled>
<input type="reset" value="やめとく"></input><!--キャンセル可能-->
</form>

<script>
function manage() {
  const txtJAB = document.getElementById('txt');
  const amaJAB = document.getElementById('ama');
  const submJAB = document.getElementById('sager');
  const chareJAB = document.querySelectorAll('input[name="sample[]"]:checked');

  if (txtJAB.value != '')
  if (amaJAB.value != '')
  if (chareJAB.length === 0) {
    submJAB.disabled = true;
  }
  else {
    submJAB.disabled = false;
  }
}
</script>

バグ２、画像

Answer 1

<script>
document.addEventListener('input', ()=>{
  let flg=txt.value=="" ||
          ama.value=="" ||
          !document.querySelector('[name="sample[]"]:checked');
  sager.disabled=flg;
});
</script>
<form action="" method="POST">
text:<input type="text" id="txt" name="aaa" required><br>
email:<input type="email" id="ama" name="email" required><br>

<label><input type="checkbox" name="sample[]" value="1">選択肢1</label><br>
<label><input type="checkbox" name="sample[]" value="2">選択肢2</label><br>
<label><input type="checkbox" name="sample[]" value="3">選択肢3</label><br>
<label><input type="checkbox" name="sample[]" value="4">選択肢4</label><br>

<input type="submit" id="sager" value="送信" disabled>
<input type="reset" value="やめとく"></input><!--キャンセル可能-->
</form>

Comments

[hitugi]

毎度美しい解答、ありがとうございました。
可動できました。

Answer 2

  if (txtJAB.value != '')
  if (amaJAB.value != '')
  if (chareJAB.length === 0) {
    submJAB.disabled = true;

ロジックがおかしいです。このコードを読むと「txtJABが記入済み かつ amaJABが記入済み かつ チェックボックスが未チェックなら、送信ボタンを無効化」「txtJABが記入済み かつ amaJABが記入済み かつ チェックボックスがチェック済みなら、送信ボタンを有効化」となっています。

  if (txtJAB.value == '' ||
      amaJAB.value == '' ||
      chareJAB.length === 0) {
    submJAB.disabled = true;

ではないでしょうか。

---

ついでに、required 属性が使われているので txtJAB と amaJAB を個別にチェックする必要はありません。if の部分は

submJAB.disabled = !(document.querySelector('form').checkValidity() &&
                     chareJAB.length > 0);

でよいでしょう。

Comments

[yambejp]

送信ボタンの押下制御は視覚的な変更を伴うためrequiredによる送信制御とユーザビリティが異なり、requiredだから省いて良いものではないと思います。

[hitugi]

解答ありがとうございます。
ただ、
if (txtJAB.value == '' ||　〜〜
あまり挙動は変わってないですね...

ifの部分の件に関して、こうでしょうか?
if {submJAB.disabled = !(document.querySelector('form').checkValidity() &&
chareJAB.length > 0);}

[int32_t]

yambejpさん、省くためのコードではありません。

hitugiさん、
> あまり挙動は変わってないですね...
挙動は変わるはずです。外側の2つのifは不要ですよ。

> ifの部分の件に関して、こうでしょうか?

いいえ、この場合 if は不要です。「const chareJAB = ...」の後、そのコードだけでいいはずです。

[hitugi]

ロジック、 || 論理和の説明など、ありがとうございました。
これからも勉強してみます。