CODEWITHSUNDEEP
javascriptjqueryhtml
Dragon12
Dragon12

Reputation: 7

How to disabled button

How can I disable button using javascript or jquery? I want to disable a button if certain action is happened. Example If the order_status is Accepted then the Accept button is disabled. I searched in internet but I dont quiet understand why my code doesn't work for me. I tried both javascript and jquery (See codes below) but nothings happen, the button didn't disable.

HERE MY CODES

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

THIS IS MY CODE FOR JQUERY

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

I ALSO TRIED THIS 

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

  </script>

My mind is blank, Im struggling right now. I hope you understand me guys. I hope can help me guys with my problem, I needed it so badly for the transaction for our ordering system.

Upvotes: 0

Views: 168

Answers (3)

Muneeb
Muneeb

Reputation: 1559

You can try like this if you want target class

   <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

Upvotes: 0

Amani Ben Azzouz
Amani Ben Azzouz

Reputation: 2565

If you are trying to select an element by its id using JQuery you have to use # selector : see jQuery selectors.

If you are using jQuery 1.6+ use prop() instead of 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>

Upvotes: 1

Sindhoor
Sindhoor

Reputation: 558

Try Below code

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

Upvotes: 0

Related Questions