@foreach($fiche as $f)
<tr id="trTab">
<td>{{ $f->Date }}</td>
<td>{{ $f->activite1 }}</td>
<td>{{ $f->heuresEffectu }}</td>
<td>{{ $f->Poids }}</td>
<td>{{ $f->ecart }}</td>
<form method="post" action="" id="form1">
<td>
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$f->id}}">
<button type="submit" class="btn btn-primary" id="valider" onclick="">V</button>
</td>
</form>
<form method="post" action="">
<td>
<button type="submit" class="btn btn-primary" id="refuser">R</button>
</td>
</form>
</tr>
@endforeach
and i have this jquery code which disables a button when i click on it :
<script>
$("#valider").click(function() {
if ($('#refuser').prop("disabled")) {
$('#refuser').attr("disabled", false);
} else {
$('#refuser').attr("disabled", true);
}
$("#form1").toggle();
});
</script>
the jquery code is working fine but the problem is whenever i click on one of the buttons it only works for the first row , how do i fix this ?
>Solution :
PHP CODE:
@foreach($fiche as $f)
<tr id="trTab">
<td>{{ $f->Date }}</td>
<td>{{ $f->activite1 }}</td>
<td>{{ $f->heuresEffectu }}</td>
<td>{{ $f->Poids }}</td>
<td>{{ $f->ecart }}</td>
<form method="post" action="" id="form1">
<td>
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$f->id}}">
<button type="submit" class="btn btn-primary" class="valider" data-id="{{$f->id}}" onclick="">V</button>
</td></form>
<form method="post" action="">
<td>
<button type="submit" class="btn btn-primary" id="refuser_{{$f->id}}" data-id="{{$f->id}}">R</button>
</td>
</form>
</tr>
@endforeach
- Your code won’t work as multiple Same IDs are there and that is the first thumbrule.
- If you have multiple elements than try to use class instead of id.
I have added class="valider" instead of id. - To differenciate which class is clicked you can see I have added data attribute data-id="" will give extra attribute which can help you to retrieve which class id clicked.
Your final jquery code can be like this:
<script>
$(".valider").click(function() {
//get current id which was clicked
var current_id = $(this).data("id");
if ($('#refuser_'+current_id).prop("disabled")) {
$('#refuser_'+current_id).attr("disabled", false);
} else {
$('#refuser_'+current_id).attr("disabled", true);
}
$("#form1").toggle();
});
</script>