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

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  id="updatemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div >
          <div >

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

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

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

CodePudding user response：

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" >Approve</button>