[英]Disable button after click in JQuery
My button uses AJAX to add information to the database and change the button text.我的按钮使用 AJAX 向数据库添加信息并更改按钮文本。 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?我该怎么做呢?
HTML 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 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();
}
*Updated *更新
jQuery
version would be something like below: jQuery
版本如下所示:
function load(recieving_id){
$('#roommate_but').prop('disabled', true);
$.get('include.inc.php?i=' + recieving_id, function(data) {
$("#roommate_but").html(data);
});
}
You can do this in jquery by setting the attribute disabled to 'disabled'.您可以在 jquery 中通过将属性disabled设置为 'disabled' 来做到这一点。
$(this).prop('disabled', true);
I have made a simple example http://jsfiddle.net/4gnXL/2/我做了一个简单的例子http://jsfiddle.net/4gnXL/2/
This code is used to accept / decline particular course which a student got as part of allotment in the college.此代码用于接受/拒绝学生作为大学分配的一部分获得的特定课程。
<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;">✔ </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">✘ </button> </div> </td>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.