チェックかつ入力されたら送信可能にするボタンを実装したい

Question

入力フォームにて、テキストエリアに入力され、かつ同意するボタン（3つ）が押されたら、
ボタンが初めて選択可能となる方法をご教授いただきたくお願いします。
またテキストエリアは1000文字まで入力可能でそれを超えたらボタンはまた選択不可としたいです。

htmlは下記の通りです。

    <form>
      <p>
        <label for="inquiry">---問い合わせ---</label><br />
        <span class="count">0</span>
        <textarea id="inquiry" name="inquiry" cols="60" row="5"></textarea>
      </p>

      <div class="agreement">
        <!--checkbox1-->
        <input type="checkbox" name="agree" id="agree1" class="agereement_check"><label for="agree1">同意します-1</label>
        <!--checkbox2-->
        <input type="checkbox" name="agree" id="agree2" class="agereement_check"><label for="agree2">同意します-2</label>
        <!--checkbox3-->
        <input type="checkbox" name="agree" id="agree3" class="agereement_check"><label for="agree3">同意します-3</label>
      </div>
      <br>

      <button type="button" class="request_button">確認</button>

    </form>

jsは下記のようにしています。

  $('.request_button').prop('disabled', true);

  $('#inquiry').bind('keydown keyup keypress change', function(){
    var typeLength = $(this).val().length;
    $('.count').html(typeLength);
    if(typeLength === 0){
      $('.request_button').prop('disabled', true);
    } else if (typeLength > 0 && typeLength < 1000){
        $('.request_button').prop('disabled', false);
    } else {
      $('.request_button').prop('disabled', true);
    }
  });

  $('.agereement_check').click(function(){
    var checkCount = $('.agreement :checked').length;
    if (checkCount === $('.agreement :checkbox').length){
      $('.request_button').prop('disabled', false);
    } else {
      $('.request_button').prop('disabled', true);
    }
  });

jsfiddleにもソースをあげております。
https://jsfiddle.net/m_a_u_v_e/xpvt214o/658724/

上記の記述ですと、同意するにチェックをしていなくても、テキストボックスに文字をいれると、
確認ボタンが選択可能となってしまいます。
また、文字を入力せずに同意しますボタンにチェックを入れただけで、
確認ボタンが選択可能となってしまいます。

両方の条件を満たしたときにはじめてボタンを活性化したいです。

どうかご教授いただけますでしょうか、宜しくお願い致します。

Comments

[m.ts10806]

念のためhtmlも提示してください。←ごめんなさい。ありましたね。スルーしてください。

Answer 1

こんな感じでいかがでしょうか。

const toggleRequestButton = () => {
  const $requestButton = $('.request_button');
  const textLength = $('#inquiry').val().length;

  if (textLength > 0 && textLength < 1000 && $('.agereement_check').length === $('.agereement_check:checked').length) {
    $requestButton.prop('disabled', false);
  } else {
    $requestButton.prop('disabled', true);
  }
}

$(document).on('input', '#inquiry', () => {
  toggleRequestButton();
  $('.count').text($('#inquiry').val().length);
});
$(document).on('click', '.agereement_check', toggleRequestButton);

textareaのlengthを2回取得しているのがパフォーマンス的にアレですけどそんな頑張るところでもないので...

Comments

[spookybird]

こちら、動作するものです。ブラウザにまだタブが残ってたので一応。
https://jsfiddle.net/xpvt214o/659087/

[m_a_u_v_e]

早速ご教示いただきありがとうございます。
お教えいただいたスクリプトにて意図した動きになっておりました。

ただ一つだけ気になることがありまして、、
改行や空のスペースをいれて、チェックボックスにて同意した場合、
ボタンが活性化してしまいます。
これを回避する方法などお分かりましたらご教示いただきたくお願いいたします。

どうぞ宜しくお願い致します。

[spookybird]

inquiry から取得した文字列を `trim` するといいと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim

[m_a_u_v_e]

改行とスペースをtrimにて対応いたしました。
textLength = $('#inquiry').val().trim().length;
こちらにて思い通りの仕様になりました。

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

Answer 2

input と textarea の required 属性、maxlength 属性だけで特にスクリプトはいらないような気がしますがどうでしょう？

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea

$(document).on('change', 'form', function(event) {
  $('.request_button').prop('disabled', !this.checkValidity());
});