disabled属性をつけるとsweetalertがでてこなくなる

Question

前提・実現したいこと

お世話になってます。
テキストエリアが未入力の場合、disabled属性をtrueにし、入力されている場合はdisabled属性をfalseにしてsweetalertを出したい。

###問題点
disabledがfalseになると、sweetalertが出ず値を送ってしまいます。
アラートで確認後、値をおくりたいです。

ご存じのかた宜しくお願いします。

試したこと

disabled属性をつけなければアラートは正常に動きます

<form>
 <input type="text" id=namedata>
 <button type="submit" id="button-a">

 </button>
</form>

<script>


if ($(this).val().length < 1 || $("#namedata").val().length < 1) {
　　　$("#button-a").prop("disabled", true);
} else {
　　　$("#button-a").prop("disabled", false);
}


$("#button-a").click(function(){

Swal.fire({
  title: '確認',
  text: "本当に依頼通知しますか？",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: '依頼する',
  cancelButtonText: 'やめる'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      '依頼完了！',
      'ご登録ありがとうございます',
      'success',
      );
      document.myform.submit();
  }else{
    Swal.fire({
title: 'キャンセルしました'
  });
  }
});
event.preventDefault();
});



</script>

Answer 1

ざっくり見ただけですが、イベントリスナは最低でも２つ定義する必要があります
（ユーザが実際に行う操作手順とイベントのあり方を考える必要があります）。

1. window : load / DOMContentLoaded などで button[disabled] の初期値をチェック

（BODYの末尾に記述したり、HTMLでbutton[disabled]を定義するなら不要）
2. #namedata : change イベントで 未入力の場合 を判別し button[disabled] を変更する
3. #button-a : button[disabled=false] で判断（SweetAlert利用）

テキストエリアが未入力の場合、disabled属性をtrueにし、入力されている場合はdisabled属性をfalseにしてsweetalertを出したい。

イベント 1. はBODY末尾で実装されているはずですが、this は Window となるスコープなので不要です。
イベント 2. の処理がありません、入力値を削除した際に対応してください。

let checkInput = () => {
  let val = $("#namedata").val();// "" or anyString
  $("#button-a").prop("disabled", !Boolean(val) )
}
checkInput(); // 初期化
$("#namedata").change(checkInput); // 入力の取りやめに対応

イベント3. のリスナに引数 eventがないので、event.preventDefault(); は動きません。

Comments

[yushiDDR]

解決しました！ありがとうございます