我只想在用模态引导更新过程中禁用“批准”按钮。

Question

这是在单击我的表中的视图按钮后显示的模式形式。每个字段都有数据值，因为我正在更新列表。现在，我希望根据“待定”和“批准”状态禁用“批准”按钮。

 <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

为此，您需要一些简单的JavaScript，假设您只初始化按钮一次，因为输入是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>

​