Disable button after click in JQuery

Question

My button uses AJAX to add information to the database and change the button text. However, I wish to have the button disabled after one click (or else the person can spam the information in the dataabase). How do I do this?

HTML

<button class="btn btn-lg btn-primary" id='roommate_but' onclick='load(<?php echo $user_id;?>)'><span class="glyphicon glyphicon-plus"></span> Add Person</button>

Javascript / AJAX / JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

function load(recieving_id){                                    
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    } else{
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){  
            document.getElementById("roommate_but").innerHTML =  xmlhttp.responseText;


        }

    }

xmlhttp.open('GET','include.inc.php?i=' + recieving_id, true);

xmlhttp.send();


}

Answer 1

*Updated

jQuery version would be something like below:

function load(recieving_id){
    $('#roommate_but').prop('disabled', true);
    $.get('include.inc.php?i=' + recieving_id, function(data) {
        $("#roommate_but").html(data);
    });
}

Answer 2

You can do this in jquery by setting the attribute disabled to 'disabled'.

$(this).prop('disabled', true);

I have made a simple example http://jsfiddle.net/4gnXL/2/

Answer 3

Consider also .attr()

$("#roommate_but").attr("disabled", true); worked for me.

Answer 4

This code is used to accept / decline particular course which a student got as part of allotment in the college.

<script>
    $(document).on('click', '.decline', function() {
     var courseid = $(this).attr('data-id');
     $('#accept_'+courseid).prop('disabled', true);
    });

    $(document).on('click', '.accept', function() {
      var courseid = $(this).attr('data-id');
      $('#decline_'+courseid).prop('disabled', true);
    });
    function accept_decline_action(regno,coursecode,coursename,btnval){

      var url = '<?php echo site_url('home/accept_decline_status') ?>';
      $.ajax({
        url: url,
        type: 'POST',
        data: {
          regno: regno,
          coursecode: coursecode,
          coursename: coursename,
          btnval: btnval
        },
        success: function(data) {
          if (btnval == 1) {
            alert("You have accepted the course : "+coursename);
          } else {
            alert("You have declined the course : "+coursename);
          }
        }
      })
    }
</script>

<td role="cell" style="text-align: center;">
  <div>
    <button type="button" data-id = "<?= $mk['coursecode'] ?>" value = 1 
            id = "accept_<?=$mk['coursecode'] ?>" name = "accept" 
            class="btn btn-success accept"                                                             onclick="accept_decline_action('<?= $regno ?>','<?= $mk['coursecode'] ?>');"
            title="Accept" style="border-color:#4CAF50;background-color:                               #4CAF50;">&#10004
    </button>
  </div>
  <div>
    <button type="button" class="btn btn-danger decline" value=0
          data-id="<?= $mk['coursecode'] ?>" id="decline_<?= $mk['coursecode'] ?>"
          name="decline"
          onclick="accept_decline_action('<?= $regno ?>','<?= 
          $mk['coursecode'] ?>');"
          title="Decline" style="background-color:#DC143C; border-color:#DC143C">&#10008
        </button>
      </div>
    </td>