title: Disable button after click in JQuery
body: <p>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?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button class="btn btn-lg btn-primary" id='roommate_but' onclick='load(&lt;?php echo $user_id;?&gt;)'&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; Add Person&lt;/button&gt;
  </code></pre>
  
  <p>Javascript / AJAX / JQuery</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  
  function load(recieving_id){                                    
      if (window.XMLHttpRequest){
          xmlhttp = new XMLHttpRequest();
      } else{
          xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
  
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200){  
              document.getElementById("roommate_but").innerHTML =  xmlhttp.responseText;
  
  
          }
  
      }
  
  xmlhttp.open('GET','include.inc.php?i=' + recieving_id, true);
  
  xmlhttp.send();
  
  
  }
  </code></pre>