web-dev-qa-db-fra.com

Désactiver le bouton après un clic dans JQuery

Mon bouton utilise AJAX pour ajouter des informations à la base de données et modifier le texte du bouton. Cependant, je souhaite que le bouton soit désactivé après un clic (sinon la personne peut spammer les informations dans la base de données) . Comment puis-je faire cela?

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


}
18
user3377126

* mis à jour

jQuery version serait quelque chose comme ci-dessous:

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

Vous pouvez le faire dans jquery en définissant l'attribut désactivé sur 'désactivé'.

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

J'ai fait un exemple simple http://jsfiddle.net/4gnXL/2/

22
kplates