Wyłącz przycisk po kliknięciu w JQuery

Question

Mój przycisk wykorzystuje AJAX do dodawania informacji do bazy danych i zmiany tekstu przycisku. Jednak chciałbym, aby przycisk był wyłączony po jednym kliknięciu (inaczej osoba może spamować informacje w bazie danych). Jak mam to zrobic?

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

* Aktualizacja

jQuery wersja byłoby coś jak poniżej:

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

Answer 2

Można to zrobić w jQuery przez ustawienie atrybutu niepełnosprawnych na 'wyłączone'.

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

Zrobiłem prosty przykład http://jsfiddle.net/4gnXL/2/