如何禁用按鈕

如何禁用使用javascript或jquery的按鈕？如果發生某些操作，我想禁用一個按鈕。示例如果order_status被接受，則接受按鈕被禁用。我在網上搜索，但我不明白爲什麼我的代碼不適合我。我嘗試了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>

我的腦子一片空白，林掙扎現在。我希望你能理解我的人。我希望能夠幫助我解決我的問題，我非常需要我們訂購系統的交易。

來源

2017-10-06 Dragon12

'$（「。submitAccept」）'應該是'$（「＃submitAccept」）'。點（'.'）是類，哈希（'＃'）是ID – Rajesh

@Rajesh嗨！我也試過，但它沒有工作 – Dragon12

試試下面的代碼

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

來源

2017-10-06 11:29:34 Sindhoor

如果你想選擇使用JQuery，你必須使用#選擇通過其ID的元素：see jQuery selectors。

如果您使用jQuery 1.6 +使用prop()代替attr()

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

<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>

來源

2017-10-06 11:32:36

它工作！但是，如果我只想禁用一個按鈕，我該怎麼做？如果我的order_status被接受，那麼我的接受按鈕被禁用。 – Dragon12

'this'表示當前元素..在這種情況下，您只是禁用點擊元素。 –

你可以嘗試這樣的，如果你想目標類

<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

來源

2017-10-06 11:51:19

如何禁用按鈕

回答

相關問題