Как я могу динамически включать / отключать кнопки отправки, когда их текстовое поле пусто?

Question

Я работаю с Laravel 5 и у меня есть следующие HTML-страницы:

HTML 1

<div class="row">    
    @foreach($postList as $post)
        @include('Pages.Post.postInGroup', ['post'=>$post, 'commentsList'=>$commentsList])
    @endforeach
</div>

HTML 2

<form id="msform" action="{{route('comments.store')}}" method="post">
    {{ csrf_field() }}
    <div class="row align-items-center">   
        <!-- nascondere bottoni per visitatori -->
        <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
            <img src="{{url(Auth::user()->picture_path)}}" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
        </div>
        <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
            <textarea class="form-control" placeholder="Post a comment" id="comment_content" name="comment_content" rows="1"></textarea>
        </div>
        <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" > <!--style="display: inline-block; margin-right: 1px;"-->
            <input type="submit" name="submit" class="btn btn-primary" value="Comment" style="background-color: #228B22;"/>
            <input type="hidden" value="{{$post->id}}" name="postId" id="postId">
        </div>
    </div>
</form>

Как видите, HTML 1 может повторять код HTML 2 несколько раз в зависимости от количества объектов в $postList. HTML 2 содержит изображение, за которым следуют textarea и submit button.

То, что я хочу сделать, это disable кнопка отправки, только если соответствующая текстовая область пуста.

Например, я ездил на велосипеде 3 раза, поэтому у меня будет:

1. Textarea - Кнопка
2. Textarea - Кнопка
3. Textarea - Кнопка

Если я захочу написать во 2-й текстовой области, тогда мне нужно будет enable только кнопку рядом с этой текстовой областью. Я надеюсь, что моя проблема ясна.

Предупреждение , я не могу изменить имя текстовой области, потому что я использую его внутри контроллера для получения данных из текстовой области следующим образом: $comment_content = $request->input('comment_content'); и я хочу отключить / включить только отправку кнопки, которые я выложил в HTML 2.

EDIT

NEW HTML 2

<form id="msform" action="{{route('comments.store')}}" method="post">
    {{ csrf_field() }}
    <div class="row align-items-center">   
        <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
            <img src="{{url(Auth::user()->picture_path)}}" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
        </div>
        <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
            <textarea class="form-control" placeholder="Post a comment" id="comment_content {{$post->id}}" name="comment_content" rows="1"></textarea>
        </div>
        <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
            <input type="submit" name="comment_button {{$post->id}}" class="btn btn-primary" value="Comment" style="background-color: #228B22;"/>
            <input type="hidden" value="{{$post->id}}" name="postId" id="postId">
            <input type="hidden" value="{{$theGroup->id}}" name="groupId" id="groupId">
        </div>
    </div>
</form>

Теперь, каждый раз, когда выполняется цикл @foreach, текстовая область id будет comment_content {{$post->id}}, а name кнопки отправки будет comment_button {{$post->id}}, чтобы гарантировать динамизм элементов, как было запрошено в вопрос. Так что теперь, если я повторю цикл три раза, у меня будет:

1. Textarea (id = "comment_content 1") - кнопка (name = "comment_button 1")

2. Textarea (id = "comment_content 2") - кнопка (name = "comment_button 2")

3. Textarea (id = "comment_content 3") - кнопка (name = "comment_button 3")

Answer 1

Об отключенных кнопках

Отключенные кнопки могут быть вредны для пользователя. Пусть кнопка всегда включена и показывает встроенные сообщения проверки, если обязательные поля пусты, когда пользователь нажимает «Отправить».

Дополнительная информация: https://ux.stackexchange.com/questions/76301/form-validation-and-disabled-buttons

Проверка собственной формы

Вы можете использовать собственную проверку HTML5, чтобы получить это поведение. Посмотрите на этот упрощенный пример: https://codepen.io/anon/pen/rvGLrm

<form>
  <label for="choose">Would you prefer a banana or cherry?</label>
  <input id="choose" name="i_like" required>
  <button>Submit</button>
</form> 

Подробнее о проверке собственной формы: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

Answer 2

Вы можете прослушивать keyup, поэтому, когда пользователь печатает, если значение пусто, это отключит / включит кнопку отправки

//start with them disabled
$('#msform > div > div > input[name=submit]').prop('disabled', true);

//while user is typing disable and enable based on the value.
$('#msform > div textarea').on('keyup', function() {
  $(this).parents('.row').find('input[name=submit]').prop('disabled', $(this).val() == '');
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="msform">
  <div class="row align-items-center">
    <!-- nascondere bottoni per visitatori -->
    <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
      <img src="https://placehold.it/100x100" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
    </div>
    <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
      <textarea class="form-control" placeholder="Post a comment" id="comment_content" name="comment_content" rows="1"></textarea>
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
      <!--style="display: inline-block; margin-right: 1px;"-->
      <input type="submit" name="submit" class="btn btn-primary" value="Comment" style="background-color: #228B22;" />
      <input type="hidden" value="1" name="postId" id="postId1">
    </div>
  </div>
  
  <div class="row align-items-center">
    <!-- nascondere bottoni per visitatori -->
    <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
      <img src="https://placehold.it/100x100" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
    </div>
    <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
      <textarea class="form-control" placeholder="Post a comment" id="comment_content" name="comment_content" rows="1"></textarea>
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
      <!--style="display: inline-block; margin-right: 1px;"-->
      <input type="submit" name="submit" class="btn btn-primary" value="Comment" style="background-color: #228B22;" />
      <input type="hidden" value="1" name="postId" id="postId2">
    </div>
  </div>
  
  
  <div class="row align-items-center">
    <!-- nascondere bottoni per visitatori -->
    <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
      <img src="https://placehold.it/100x100" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
    </div>
    <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
      <textarea class="form-control" placeholder="Post a comment" id="comment_content" name="comment_content" rows="1"></textarea>
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
      <!--style="display: inline-block; margin-right: 1px;"-->
      <input type="submit" name="submit" class="btn btn-primary" value="Comment" style="background-color: #228B22;" />
      <input type="hidden" value="1" name="postId" id="postId3">
    </div>
  </div>
</form>