I just want to disable the Approve button in updating process with modal boostrap

Question

This is the modal form that show after clicking the view button in my table. Every field already have data value because I am updating a list. Now I want to disabled the Approve button base on status which is "Pending" and "Approved"

 <form action="code_book.php" method="POST">
        <div class="modal fade" id="updatemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">

            <input type="hidden" name="update_id" id="update_id">

            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Update Appointment Status</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- start modal content -->
            <div class="modal-body">
              <div class="mb-3">
                <label for="#service" class="col-md-6">Appointment Date</label><label for="#description"  class="col-md-6">Appointment Time</label><br>
                <input type="text" class="col-md-6 inputdesign" name="date" id="date" readonly>
                <input type="text"  class="col-md-6 inputdesign" name="time" id="time" readonly>
              </div>
               <div class="mb-3">
                <label for="#service" class="col-md-6">Name</label><label for="#description"  class="col-md-6">Contact</label><br>
                <input type="text" class="col-md-6 inputdesign" name="username" id="username" readonly>
                <input type="text" class="col-md-6 inputdesign"  name="contact" id="contact" readonly>
              </div>
              
                <div class="mb-3">
                <label for="#service" class="col-md-6">Pet Name</label><label for="#description"  class="col-md-6">Service</label><br>
                <input type="text" class="col-md-6 inputdesign" name="bookpet_id" id="bookpet_id" readonly>
                <input type="text" class="col-md-6 inputdesign" name="service_id" id="service_id" readonly>
              </div>
              
              <div class="mb-3">
                <label for="#service" class="col-md-12">Complaint</label>
                <input type="text" class="form-control inputdesign" name="complaint" rows="3" id="complaint" readonly>
              </div>
              
               <div class="mb-3">
                <label for="#description" style="margin-top: 10px;" class="form-label">Status</label>
                <input type="text" class="form-control inputdesign" name="status" id="status" placeholder="Enter the service" readonly>
              </div>
            </div>
            <div class="modal-footer">

              <button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>
              
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal" >Cancel</button>
            </div>
          </div>
        </div>
      </div> 

Answer 1

You need some easy JavaScript for that, assuming you're just initializing the button once because the input is readonly.

$(document).ready(function() {
  $('#datatableid tbody').on('click', '.updatebtn', function() {
    $('#updatemodal').modal('show');
    $tr = $(this).closest('tr');
    var data = $tr.children("td").map(function() {
      return $(this).text();
    }).get();
    console.log(data);
    $('#update_id').val(data[0]);
    $('#date').val(data[1]);
    $('#time').val(data[2]);
    $('#username').val(data[3]);
    $('#contact').val(data[4]);
    $('#bookpet_id').val(data[5]);
    $('#service_id').val(data[6]);
    $('#complaint').val(data[7]);
    $('#status').val(data[8]);
    // disable input if not approved
    $('#updatedata').prop('disabled', data[8] !== 'Approved');
  });
});

<input type="text" id="status" placeholder="Enter the service" value="Pending" readonly />
<button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>