ひとまず、↓のJsfiddleでやりたいことを試しました。
https://jsfiddle.net/h_tran93/2puohncL/27/

HTML
1<div class="js-AddButton__Target">
2  <div class="p-AddSerif">
3    <textarea class="sample"></textarea>
4    <div class="p-AddSerif__count" data-count="10"></div>
5  </div>
6  <br>
7  <div class="p-AddSerif">
8    <textarea class="sample"></textarea>
9    <div class="p-AddSerif__count" data-count="10"></div>
10  </div>
11  <br>
12  <div class="p-AddSerif">
13    <textarea class="sample"></textarea>
14    <div class="p-AddSerif__count" data-count="10"></div>
15  </div>
16  <br>
17</div>
18
19 <input type="button" class="sample_btn" value="送信する">

css
1.p-AddSerif__count.cnt_danger{
2    color: #FF0000;
3}

Jquery
1$(function(){
2  function countTextArea(input) {
3    //文字数を表示する.p-AddSerif__countを取得
4    var counter = $(input).parents('.p-AddSerif').find(".p-AddSerif__count");
5    // データ属性(data-count)から最大文字数を取得
6    var maxLength = counter.data("count");
7    // 現在の文字数を取得
8    var currentLength = $(input).val().length;
9    var htmlVal = currentLength + " / " + maxLength;
10
11   //現在たい最大を比較
12    if ( parseInt(currentLength) <= parseInt(maxLength) ) {
13     /*  counter.html("<span style='color:red'>" + htmlVal + "</span>"); */
14    counter.html(htmlVal);
15      counter.removeClass('cnt_danger');
16       $('.sample_btn').prop('disabled', false);
17    } else {
18      counter.html(htmlVal);
19      $('.sample_btn').prop('disabled', true);
20      counter.addClass('cnt_danger');
21    }
22  }
23
24  // ページ表示時に文字数をカウントして表示
25  $('textarea').each(function(){
26    countTextArea($(this));
27    var textLetter = $(this).val().length;
28  });
29
30  // フォーム入力時に文字数をカウントして表示
31  $('textarea').on('keydown keyup keypress change',function(){
32    countTextArea($(this));
33  });
34});

実装したいこと
textareaに入力した文字数が10文字超えたら、
●現在の入力文字数を表示
●現在の入力文字数が最大文字超えたら色が赤くなる
●↑＋送信ボタンが押せなくなる
もっとやりたいこと
送信ボタンは1個しかないのTextareaにただ、一個（Textarea）だけは入力文字数が10文字超えると送信ボタンが押せなくなりたいです。
どなたかお分かりになるかた、ご教示いただけると助かります。

kei344

2019/11/27 10:41

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

firefire123

2019/11/27 11:02

kei344様、見ていただいて、ありがとうございます。日本語の説明下手で申し訳ありません。説明が加えたので、また見ていただいたらうれしいです。

kei344

2019/11/28 16:01

この質問を含め過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

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

回答1件

ベストアンサー

こんな感じですか？

javascript
1<script>
2$(function(){
3  $('textarea').on('input',function(){
4    var len=$(this).val().length;
5    (dom=$(this).nextAll('[data-count]')).text("現在の文字数:"+len+"/最大:"+dom.data('count'));
6    var flg=$('[data-count]').filter(function(){
7      var count=$(this).data('count');
8      var len=$(this).prevAll('textarea').val().length;
9      return count<len;
10    }).length>0;
11    $('.sample_btn').prop('disabled',flg);
12  });
13});
14</script>
15<div class="js-AddButton__Target">
16  <div class="p-AddSerif">
17    <textarea class="sample"></textarea>
18    <div class="p-AddSerif__count" data-count="10"></div>
19  </div>
20  <br>
21  <div class="p-AddSerif">
22    <textarea class="sample"></textarea>
23    <div class="p-AddSerif__count" data-count="10"></div>
24  </div>
25  <br>
26  <div class="p-AddSerif">
27    <textarea class="sample"></textarea>
28    <div class="p-AddSerif__count" data-count="8"></div>
29  </div>
30  <br>
31</div>
32
33 <input type="button" class="sample_btn" value="送信する">

改行を2文字

javascript
1$(function(){
2  $('textarea').on('input',function(){
3    var val=$(this).val();
4    var reg=val.match(/\n/g)||[];
5    var len=val.length+reg.length;
6    (dom=$(this).nextAll('[data-count]')).text("現在の文字数:"+len+"/最大:"+dom.data('count'));
7    var flg=$('[data-count]').filter(function(){
8      var count=$(this).data('count');
9      var val=$(this).prevAll('textarea').val();
10      var reg=val.match(/\n/g)||[];
11      var len=val.length+reg.length;
12      if(r=v.match(/\n/g)) len+=r.length;
13      return count<len;
14    }).length>0;
15    $('.sample_btn').prop('disabled',flg);
16  });
17});
18