Deaktivieren Sie die Schaltfläche nach dem Klicken in JQuery

Question 1

Meine Schaltfläche verwendet AJAX, um Informationen zur Datenbank hinzuzufügen und den Schaltflächentext zu ändern. Ich möchte jedoch, dass die Schaltfläche nach einem Klick deaktiviert wird (andernfalls kann die Person die Informationen in der Datenbank spammen). Wie mache ich das?

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();


}

Question 2

*Aktualisiert

jQuery Version wäre so etwas wie unten:

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

Question 3

Sie können dies in jquery tun, indem Sie das Attribut setzen deaktiviert auf „deaktiviert“.

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

Ich habe ein einfaches Beispiel gemacht http://jsfiddle.net/4gnXL/2/

Question 4

Überlege auch .attr()

$("#roommate_but").attr("disabled", true); hat bei mir funktioniert.

Question 5

Dieser Code wird verwendet, um einen bestimmten Kurs zu akzeptieren / abzulehnen, den ein Student im Rahmen der Zuteilung am College erhalten hat.

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