Disattiva pulsante dopo clic in JQuery

Il mio pulsante utilizza AJAX per aggiungere informazioni al database e modificare il testo del pulsante. Tuttavia, desidero disattivare il pulsante dopo un clic (altrimenti la persona può inviare spam alle informazioni nella base dati). Come faccio a fare questo?Disattiva pulsante dopo clic in JQuery

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


}

fonte

2014-05-11 user3377126

trovi effettivamente jQuery incluso nella pagina? Ti sto chiedendo perché - sebbene tu abbia taggato questa domanda con 'jQuery' - non c'è jQuery usato nel tuo codice. Quindi le risposte potrebbero variare fortemente a seconda che tu possa usare jQuery o meno. – Steve

Sì, sto usando JQuery. Ho modificato il mio post originale per mostrare il link a JQuery. Qualche suggerimento per disabilitare il pulsante dopo un clic? – user3377126

Per favore ** non usare ** XHR normale se stai già usando jQuery. È estremamente brutto mescolare entrambi. – ThiefMaster

* Aggiornato versione

jQuery sarebbe qualcosa di simile di seguito:

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

fonte

2014-05-11 21:11:21

Quando l'ho aggiunto nella funzione di caricamento, il pulsante è ancora cliccabile e ha interrotto la sua funzione per aggiungere elementi al database e modificare il testo del pulsante. Qualche posizione particolare per quel codice per assicurarsi che funzioni con i pulsanti di altre funzionalità? – user3377126

Dopo il successo di 'ajax' rimossa' disabled', risposta aggiornata –

Ho sostituito l'intera funzione di caricamento con la funzione di caricamento (quindi sostituendo AJAX per Jquery) e ancora non disattiva il pulsante dopo un clic (ancora cliccabile). Tuttavia, è ancora in grado di fare la stessa cosa che ha fatto AJAX, andare in un'altra pagina, aggiungere qualcosa a db e cambiare il testo del pulsante. Se aiuta, sto usando un pulsante di bootstrap. Qualche cosa che posso ancora fare? – user3377126

È possibile farlo in jQuery impostando l'attributo disabile a 'disabilitato'.

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

ho fatto un semplice esempio http://jsfiddle.net/4gnXL/2/

fonte

2014-05-11 21:10:52 kplates

Dovresti sapere quando usare 'attr' e quando usare' prop'. Questo dovrebbe essere fatto usando 'prop'. Puoi leggere di più a riguardo [qui] (https://stackoverflow.com/questions/5874652/prop-vs-attr). –

Sì, penso che Adam abbia ragione. Quando ho provato questo codice: $ ('roommate_but'). Click (function() { $ (this) .attr ('disabled', 'disabled'); }); , il pulsante non era ancora disabilitato. Quindi devo solo cambiare attr per puntellare giusto? Qualunque posto posso posizionare il pulsante per farlo funzionare? Se aiuta, in realtà sto usando un pulsante di bootstrap – user3377126

-1 per usare attr anche se '.prop()' è lì da anni. Tuttavia, entrambi * dovrebbero * funzionare. – ThiefMaster

Disattiva pulsante dopo clic in JQuery

risposta

Problemi correlati