title: Add "disabled" attribute to Bootstrap button via AJAX
body: <p>I have a Bootstrap modal dialog and one of the buttons calls a script that makes an AJAX request. I need to add the disabled="disabled" attribute to the button that makes the call if the AJAX response is successful.</p>
  
  <p>Here's my modal dialog:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal" id="contact1CallModal"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Call Contact&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Calling John Citizen&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="ajaxError1" class="alert alert-danger text-center" role="alert" style="display:none"&gt;
          Error Response
        &lt;/div&gt;
        &lt;div id="ajaxSuccess1" class="alert alert-success text-center" role="alert" style="display:none"&gt;
          Success Response
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" id="callContact1" class="btn btn-success"&gt;Start Call&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-content --&gt;
    &lt;/div&gt;
    &lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  &lt;!-- /.modal --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here's the script that runs when the Start Call button is clicked:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#callContact1").click(function() {
    console.log('starting call back request');
    $.ajax({
        url: "&lt;?php echo $callBackURL ;?&gt;" + defaultCallBackNumber + "&lt;?php echo $contact1CallBack ;?&gt;",
        data: {},
        type: "GET"
      })
      .then(function(data, status, xhr) {
        var httpStatus = status;
        var httpResponseCode = (xhr.status);
        var httpResponseText = (xhr.responseText);
        console.log('httpStatus: ' + httpStatus);
        console.log('httpResponseCode: ' + httpResponseCode);
        console.log('httpResponseText: ' + httpResponseText);
        $('#ajaxSuccess1').html('Call in Progress').show();
      })
      .fail(function(xhr) {
        var httpStatus = (xhr.status);
        var httpResponseCode = (xhr.getAllResponseHeaders);
        var httpResponseText = (xhr.responseText);
        var ajaxError = 'There was an requesting the call back. HTTP Status: ' + httpStatus + ' ' + httpResponseText;
        console.log('httpStatus: ' + httpStatus);
        console.log('httpResponseCode: ' + httpResponseCode);
        console.log('httpResponseText: ' + httpResponseText);
        //make alert visible 
        $('#ajaxError1').html(ajaxError).show();
      })
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>Not sure how to add a line that adds the disabled="disabled" elements to the Start Call button?</p>