javascript - 当文本区域为空时，如何动态启用/禁用提交按钮？

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 可以根据 $postList 中的对象数量多次重复 HTML 2 代码。HTML 2 包含一个图像，后跟一个 textarea 和一个提交按钮。

我想要做的是仅当相应的文本区域为空时才禁用提交按钮。

例如，我骑了 3 次车，所以我会:

1. 文本区域 - 按钮
2. 文本区域 - 按钮
3. 文本区域 - 按钮

如果我想在第二个文本区域中写入，那么我必须仅启用与该文本区域相邻的按钮。我希望我的问题很清楚。

警告，我无法更改文本区域的名称，因为我在 Controller 内使用它来从文本区域获取数据，如下所示:$comment_content = $request->input( 'comment_content'); 并且我只想禁用/启用我在 HTML 2 中发布的提交按钮。

编辑

新的 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 循环时，textarea id 将为 comment_content {{$post->id}}提交按钮的 name 将为 comment_button {{$post->id}} 以保证元素的动态性，如问题中所要求的。所以现在，如果我重复这个循环三次，我将得到:

1. 文本区域(id="comment_content 1") - 按钮(name="comment_button 1")

2. 文本区域(id="comment_content 2") - 按钮(name="comment_button 2")

3. 文本区域(id="comment_content 3") - 按钮(name="comment_button 3")

Answer 1

您可以监听键盘输入，因此当用户键入时，如果该值为空，则会禁用/启用提交按钮

//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>