Question

如何使用javascript或jquery禁用按钮？如果发生某些操作，我想禁用按钮。示例如果order_status为Accepted，则禁用Accept按钮。我在互联网上搜索但我不明白为什么我的代码对我不起作用。我尝试了javascript和jquery（参见下面的代码），但没有发生，按钮没有禁用。

这是我的代码

<div class="form-group">
 <label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label> 
 <input type="text"  class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
 </div>


<button type="button" input style="background-color:#4CAF50;color:white;border-color:#000000;" name="submitDelivered" id="submitDelivered" class="btn btn-success" data-toggle="modal" data-target="#myDeliverModal" onclick="deliver('<?= $_POST['order_id'] ?>')" > Delivered </button>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" onclick="accept('<?= $_POST['order_id'] ?>')" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black;border-color:#000000;" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button> 
<button type="button" input style="background-color:#f44336;color:white;border-color:#000000;" name="submitCancel" id="submitCancel" class="btn btn-success" data-toggle="modal" data-target="#myCancelModal" onclick="cancel('<?= $_POST['order_id'] ?>')">Cancel</button> 


<script>
 function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
 document.getElementById("t_order_id").setAttribute("value", order_id); 
 document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
 document.getElementById("t_user_id").setAttribute("value", user_id);
 document.getElementById("t_order_date").setAttribute("value", order_date); 
 document.getElementById("t_order_time").setAttribute("value", order_time); 
 document.getElementById("t_order_deliveryCharge").setAttribute("value", order_deliveryCharge); 
 document.getElementById("t_order_totalAmount").setAttribute("value", order_totalAmount); 
 document.getElementById("t_address").setAttribute("value", address);
 document.getElementById("t_coordinates").setAttribute("value", coordinates); 
 document.getElementById("t_drivers_number").setAttribute("value", driver_number); 
 document.getElementById("t_order_status").setAttribute("value", order_status);
 document.getElementById("ORDER_MODAL_ACCEPT").setAttribute("value", order_id);
 document.getElementById("ORDER_MODAL_DELIVER").setAttribute("value", order_id);
 document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id);


 }
function accept() { //THIS IS MY CODE FOR JAVASCRIPT 

    var x = document.getElementById("order_status").value;

 if(x == "Accepted"){
     document.getElementById("submitAccept").disabled = true;
 }
}

这是我的JQUERY代码

 $(document).on("click", ".submitAccept", function (e) {
          $(".submitAccept").attr("disabled", true);
}

我也尝试过这个

$(function () {
  ($("#order_status").keyup(function (){
      if ($("#order_status").val() == 'Accepted') {
          ('#submitAccept').prop('disabled',true);
      }else{
          ('#submitAccept').prop('disabled', false);
      }
  })
 )};
);

  </script>

我的思绪一片空白，我现在正在挣扎。我希望你能理解我们。我希望可以帮助我解决我的问题，我对订购系统的交易非常需要。

Answer 1

如果您尝试使用JQuery按其ID选择元素，则必须使用#选择器：see jQuery selectors。

如果您使用的是jQuery 1.6+，请使用prop()代替attr()

＆＃13;

$(document).on("click", "#submitAccept", function () {
          $(this).prop("disabled", true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="form-group">
 <label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label> 
 <input type="text"  class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
 </div>

<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" > Accept </button>

＆＃13;

Answer 2

尝试以下代码

$(document).on("click", "#submitAccept", function (e) {
          $(this).attr("disabled", true);
}

Answer 3

如果您想要目标类

，可以尝试这样做

   <button type="button" class="accepted" >Accepted</button>
   <button type="button" class="not-accepted">Not Accepted</button>

   $(document).ready(function() {
    $(".accepted").attr("disabled",true);
  });

here is js fiddle running example

如何禁用按钮

3 个答案: