如何在单击后禁用按钮

时间：2017-09-28 13:03:29

标签： javascript php jquery

如果点击后我怎么能禁用我的按钮？我单击按钮ACCEPT的示例将禁用该按钮，依此类推。我点击“接受”按钮后应该禁用该按钮（以及“取消”按钮），然后单击“发送”按钮，然后该按钮也应该被禁用（在此过程中“已发送”）仅启用按钮）

这是我的代码看起来像。在按钮中所有按钮的代码，我只包括所有代码。我希望你们能帮助我。谢谢！

<?php 

include_once 'ordermodal2.php';
/** *ordermodal.php **/

 $id = "";
 $order_date = "";
 $order_time = "";
 $order_id = "";
 $order_deliverCharge = "";
 $order_status = "";
 $order_totalAmount= ""; 
 $coordinates = "";
 $driver_number = "";
 $address = "";

$food_name= "";
$specal_request= "";
$quantity= "";
$amount= "";



         ?>

         <!-- MODALS --> <!-- DETAILS --> 
         <div id="myModal" class="modal fade" role="dialog" style="z-index: 1400;">
         <div class="modal-dialog modal-lg">
         <div class="modal-content">
        <form action="" method="post" class="form-horizontal">
         <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" ><center>&times;</button>
     <h4 class="modal-title" id="titleModal">Order Information</h4>
     </div>
         <div class="modal-body"> 

  <div class="form-group">
 <label for="order_id" class="col-sm-2 control-label">Order ID</label>
 <div class="col-lg-3"> 
 <input type="text" input style="width:500px" class="form-control" name="ORDER_ID" id="ORDER_ID" placeholder="" value="" required="required" readonly> 
</div>
</div>

 <div class="form-group">
 <label for="id" class="col-sm-2 control-label">User ID</label>
 <div class="col-lg-3"> 
 <input type="text" input style="width:500px" class="form-control" name="user_id" id="user_id" placeholder="" value="" required="required" readonly> 
 </div> 
 </div>

  <div class="form-group">
 <label for="order_date" class="col-sm-2 control-label">Order Date</label>
 <div class="col-lg-3"> 
 <input type="text" input style="width:500px" class="form-control" name="order_date" id="order_date" placeholder="" value="" required="required" readonly> 
 </div> 
 </div>

  <div class="form-group">
 <label for="order_time" class="col-sm-2 control-label">Order Time</label>
 <div class="col-lg-3"> 
 <input type="text" input style="width:500px" class="form-control" name="order_time" id="order_time" placeholder="" value="" required="required" readonly> 
 </div> 
 </div>

 <div class="form-group"> 
 <label for="order_deliverCharge" class="col-sm-2 control-label">Delivery Charge</label>
 <div class="col-lg-3"> 
 <input type="text" input style="width:500px" class="form-control" name="order_deliveryCharge" id="order_deliveryCharge" placeholder="" value="" required="required" readonly>
 </div> 
 </div> 

  <div class="form-group"> 
 <label for="order_totalAmount" class="col-sm-2 control-label">Total Amount</label>
 <div class="col-lg-3"> 
 <input type="text" input style="width:500px" class="form-control" name="order_totalAmount" id="order_totalAmount" placeholder="" value="" required="required" readonly>
 </div> 
 </div> 

 <div class="form-group">
 <label for="address" class="col-sm-2 control-label">Address</label> 
 <div class="col-lg-3">
 <input type="text" input style="width:500px" class="form-control" name="address" id="address" placeholder="" value="" required="required" readonly>
 </div> 
 </div>

 <div class="form-group">
 <label for="coordinates" class="col-sm-2 control-label">Coordinates</label> 
 <div class="col-lg-3">
 <input type="text" input style="width:500px" class="form-control" name="coordinates" id="coordinates" placeholder="" value="" required="required" maxlength="11" readonly>
 </div> 
 </div>

 <div class="form-group">
 <label for="driver_number" class="col-sm-2 control-label">Driver Number</label> 
 <div class="col-lg-3">
 <input type="text" input style="width:500px" class="form-control" name="drivers_number" id="drivers_number" placeholder="" value="" required="required" readonly>
 </div> 
 </div>

 <div class="form-group">
 <label for="order_status" class="col-sm-2 control-label">Order Status</label> 
 <div class="col-lg-3">
 <input type="text" input style="width:500px" class="form-control" name="order_status" id="order_status" placeholder="" value="" required="required" readonly>
 </div> 
 </div>

  <?php 
  if(isset($_POST['ORDER_ID'])){  
$order_id = trim(addslashes($_POST['ORDER_ID']));
$sql = "SELECT food_name, special_request, quantity, amount 
FROM cart_tbl
WHERE order_id=$order_id";
$result = mysqli_query(connection2(), $sql);}
?>
<table class="table table-hover table-bordered">
 <thead>
 <tr> 
 <th>Food</th>
 <th>Special Request</th>
 <th>Quantity</th>
 <th>Amount</th> 
 </tr>
 </thead> 
 <?php
if(mysqli_num_rows($result)>0)
{
    while($row = mysqli_fetch_array($result))
    {
?>
<tr>
<td><?php echo $row["food_name"];?></td>
<td><?php echo $row["special_request"];?></td>
<td><?php echo $row["quantity"];?></td>
<td><?php echo $row["amount"];?></td>
</tr>
<?php
    }
}
?>

</table>
 </div>
 <div class="modal-footer">
<button type="submit" input style="background-color:##FF0000;color:white;float:left" name="showFood" id="showFood" class="btn btn-primary " onclick="if(!confirm('Are you sure you want to see food order?')){return false;}" > Show Food</button>
<button type="submit" input style="background-color:#4CAF50;color:white" name="submitDelivered" id="submitDelivered" class="btn btn-primary " onclick="if(!confirm('Are you sure you want to deliver order?')){return false;}" > Delivered </button>
<button type="submit" input style="background-color:#0000FF;color:white" name="submitAccept" id="submitAccept" class="btn btn-primary" onclick="if(!confirm('Are you sure you want to accept order?')){return false;}" > Accept </button>
 <button type="button" style="background-color:#FFFF00;color:black" class="btn btn-success" data-toggle="modal" data-target="#myDropdown"> Send </button> 
 <button type="submit" input style="background-color:#f44336;color:white" name="submitCancel" class="btn btn-danger" onclick="if(!confirm('Are you sure you want to cancel order?')){return false;}">Cancel</button> 
  <?php
if(isset($_POST['submitDelivered'])){  
  $order_id = trim(addslashes($_POST['ORDER_ID']));
  $driver_number= trim(addslashes($_POST['drivers_number']));
  $query = "UPDATE order_tbl SET `order_status`='Delivered' WHERE `order_id` = $order_id";
  if (mysqli_query(connection2(), $query)) { 
         mysqli_query(connection2(), "COMMIT");
         $_SESSION['message'] = "Order Delivered"; } 
         else { 
         $_SESSION['message'] = mysqli_error(connection2());
         mysqli_query(connection2(), "ROLLBACK");
         }

  if($_POST['drivers_number']!=0){      
  $query2 = "UPDATE driver_tbl SET `order_id`='' WHERE `driver_number` = $driver_number";
  if (mysqli_query(connection2(), $query2)) { 
         mysqli_query(connection2(), "COMMIT");
         }
    }
  }

  if(isset($_POST['submitAccept'])){  
  $order_id = trim(addslashes($_POST['ORDER_ID']));
  $driver_number= trim(addslashes($_POST['drivers_number']));
  $query = "UPDATE order_tbl SET `order_status`='Accepted' WHERE `order_id` = $order_id";
  if (mysqli_query(connection2(), $query)) { 
         mysqli_query(connection2(), "COMMIT");
         $_SESSION['message'] = "Order Accepted"; } 
         else { 
         $_SESSION['message'] = mysqli_error(connection2());
         mysqli_query(connection2(), "ROLLBACK");
         }

  if($_POST['drivers_number']!=0){      
  $query2 = "UPDATE driver_tbl SET `order_id`='' WHERE `driver_number` = $driver_number";
  if (mysqli_query(connection2(), $query2)) { 
         mysqli_query(connection2(), "COMMIT");
         }
    }
  }


  if(isset($_POST['submitCancel'])){  
  $order_id = trim(addslashes($_POST['ORDER_ID']));
  $driver_number= trim(addslashes($_POST['drivers_number']));
  $query = "UPDATE order_tbl SET `order_status`='Cancelled' WHERE `order_id` = $order_id";
  if (mysqli_query(connection2(), $query)) { 
         mysqli_query(connection2(), "COMMIT");
         $_SESSION['message'] = "Order Cancelled"; } 
         else { 
         $_SESSION['message'] = mysqli_error(connection2());
         mysqli_query(connection2(), "ROLLBACK");
         }

  if($_POST['drivers_number']!=0){      
  $query2 = "UPDATE driver_tbl SET `order_id`='' WHERE `driver_number` = $driver_number";
  if (mysqli_query(connection2(), $query2)) { 
         mysqli_query(connection2(), "COMMIT");
         }

    }
  }

  ?>
 <script type="text/javascript">
 var x = document.getElementsByName("order_status").value;

 if(x== "Accepted"){
     document.getElementsByName("submitAccept").disabled = true;
     document.getElementsByName("submitCancel").disabled = true;
 }
  if(x== "Dispatched"){
     document.getElementsByName("submitAccept").disabled = true;
     document.getElementsByName("submitCancel").disabled = true;
     document.getElementsByName("send").disabled = true;
 }
  if(x== "Delivered"){
     document.getElementsByName("submitDelivered").disabled = true;
 }

 </script>
 </div>
 </form>
 </div>
 </div>
 </div>

2 个答案:

答案 0 :(得分：1)

一种方法是使用变量，例如var isClicked = false。您希望在运行按钮中的内容之前进行检查，例如if(isClicked = true)。点击您的按钮后，将isClicked设置为false。

答案 1 :(得分：0)

您肯定希望在JavaScript中执行此操作，并且您也可以使用此代码在任何其他按钮上执行相同的操作。

当JavaScript点击#submitAccept元素时，它会禁用该按钮。另外，请务必使用jQuery来使用此代码。

$( "#submitAccept" ).click(function() {
  $(this).attr('disabled','disabled');
});
<button type="submit" input style="background-color:#0000FF;color:white" name="submitAccept" id="submitAccept" class="btn btn-primary" onclick="if(!confirm('Are you sure you want to accept order?')){return false;}" > Accept </button>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

或者对于简单的javascript版本，与内联的onclick函数保持一致，请使用：this.disabled=true; 

<button type="submit" input style="background-color:#0000FF;color:white" name="submitAccept" id="submitAccept" class="btn btn-primary" onclick="if(!confirm('Are you sure you want to accept order?')){return false;} this.disabled=true;" > Accept </button>

相关问题
最新问题