【发布时间】:2018-05-05 23:09:18
【问题描述】:
我正在使用 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 和一个 submit button。
我想要做的是disable 提交按钮,仅当其对应的文本区域为空时。
例如,我已经骑了 3 次,所以我会:
- 文本区域 - 按钮
- 文本区域 - 按钮
- 文本区域 - 按钮
如果我想在第二个 textarea 中书写,那么我将不得不 enable 仅与该 textarea 相邻的按钮。我希望我的问题很清楚。
警告,我无法更改文本区域的名称,因为我在控制器中使用它来从文本区域获取数据,如下所示:$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}} 以保证元素的动态性,如中所要求的这个问题。所以现在,如果我重复这个循环 3 次,我会:
Textarea(id="comment_content 1") - 按钮 (name="comment_button 1")
Textarea(id="comment_content 2") - 按钮 (name="comment_button 2")
Textarea(id="comment_content 3") - 按钮 (name="comment_button 3")
【问题讨论】:
-
你的意思是如果文本区域是空的,它旁边的按钮将被禁用?
标签: javascript jquery html laravel laravel-5