Laravel и Ajax - отключить кнопку отправки, если поле столбца истинно

Я предполагаю, что у вас есть форма для каждой кнопки подтверждения, поскольку вы этого не уточняете.

Прежде всего, ваша форма и кнопка подтверждения не могут иметь идентификатор #ajax. и #confirm, потому что на Идентификаторы страниц и элементов должны быть уникальными в пределах всего документа.

Поэтому замените это классом и удалите идентификатор на кнопке подтверждения, как показано ниже:

@section('content')
<form method = "POST" action = "{{ route('sender.confirm', $sentinvoice->uuid) }}" class = "confirm-form">
    @csrf
    <input type = "hidden" name = "sender_id" value = "{{$sentinvoice->sender_id}}">
    <input type = "hidden" name = "sender_confirmed" value = "{{$sentinvoice->is_confirmed}}">
    <button class = "btn btn-success btn-sm" type = "submit">Confirm</button></form>
@endsection

Затем в вашем запросе ajax замените идентификатор на имя класса, измените событие на отправку и используйте jQuery и $ (this) текущий элемент, чтобы найти кнопку внутри него и отключить опору.

    $(".confirm-form").on('submit', function(event) {
        event.preventDefault();
        var $button = $(this).find('button');
        var data = $(this).serialize();
        $.ajax({
            type: "post",
            url: "{{ url('sender.confirm') }}",
            dataType: "json",
            data: data,
        }).done(function () {
          $button.prop('disabled', true)
        });
    });

Вот упрощенный рабочий пример:

$(".confirm-form").on('submit', function(event) {
    event.preventDefault();
    var $button = $(this).find('button');
    var data = $(this).serialize();
    $.ajax({
        type: "post",
        url: "https://jsonplaceholder.typicode.com/todos/",
        dataType: "json",
        data: data,
    }).done(function () {
      $button.prop('disabled', true)
    });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Confirm 1</td>
    <td>
      <form class = "confirm-form">
        <button>Confirm</button>
      </form>
    <td/>
  </tr>
  <tr>
    <td>Confirm 2</td>
    <td>
      <form class = "confirm-form">
        <button>Confirm</button>
      </form>
    <td/>
  </tr>
  <tr>
    <td>Confirm 3</td>
    <td>
      <form class = "confirm-form">
        <button>Confirm</button>
      </form>
    <td/>
  </tr>
</table>

Вот пара вещей:

1. Поскольку вы делаете запрос AJAX, ответ на перенаправление не имеет никакого смысла.
2. Ваш идентификатор #ajax на самом деле является идентификатором формы, вы не можете «щелкнуть» по форме, а вместо этого отправляете ее.
3. Поскольку у вас, вероятно, есть несколько форм, вы должны дать каждой из них уникальный идентификатор и отслеживать события отправки для всех из них.

Вот пример того, что вы можете сделать:

Вид:

@section('content')
<form method = "POST" action = "{{ route('sender.confirm', $sentinvoice->uuid) }}" id = "form-{{$sentinvoice->uuid}}" class='ajax'>
    @csrf
    <input type = "hidden" name = "sender_id" value = "{{$sentinvoice->sender_id}}">
    <input type = "hidden" name = "is_confirmed" value = "{{$sentinvoice->is_confirmed}}">
    <button class = "btn btn-success btn-sm" type = "submit" class = "confirm" {!! $sentinvoice->is_confirmed ? 'disabled = "disabled"' : '' !!}>Confirm</button>
</form>
@endsection

JavaScript

@section('scripts')
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

    $(".ajax").submit(function(event) { //listening on class name and for submit action
        event.preventDefault();
        var $confirmButton = $(this).find('.confirm'); // the confirm button of this form
       $confirmButton.prop('disabled', true);
        $.ajax({
            type: "post",
            url: $(this).attr('action'), //send to the correct url based on the markup
            dataType: "json",
            data: $(this).serialize(), //this refers to the submitted form
            success: function(data){
                  alert("Data Saved");
            },
            error: function(data){
                 $confirmButton.prop('disabled', false);
                 alert("Error")
            }
        });
    });
</script>
@endsection

И ваш контроллер:

public function confirmInvoice(Request $request, $uuid)
{   
    $user = auth()->user();
    $sentinvoices = Invoice::where('uuid', $uuid)->first();

    $sentinvoices->sender_id = $user->id;
    $sentinvoices->is_confirmed = 1;
    if (!$sentinvoices->save()) {
        return response()->json([ 'success' => false ], 500); //Error response
    }


    return response()->json([ 'success' => true ]); 
}

Что изменилось:

1. Идентификаторы уникальны (и не очень важны), но мы слушаем события в классах. Это потому, что JavaScript требует, чтобы идентификаторы были уникальными.
2. Мы слушаем событие submit вместо события щелчка. Здесь будут рассмотрены альтернативные способы отправки формы (например, путем перехода к кнопке и нажатия клавиши ввода).
3. Контроллер вернет JSON и соответствующий код ответа.

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