我有一个用户界面在一个表中的用户列表。每个条目/用户都有两个按钮。其中一个按钮是“检查”按钮。
<button type="submit" id="$id_from_db" class="bg-aqua btnCheckUser">Check</button>
当为特定用户单击复选按钮时,将向服务器发送POST
请求。当请求加载时,应禁用所有按钮,启动请求的按钮应将其类从bg-puple
更改为bg-aqua
,并将其文本从Check
更改为Checking...
。如果请求返回错误(由值为1
的result
指示),则按钮应该将其类从bg-aqua
更改为bg-danger
。如果没有错误,类应该从bg-aqua
更改为bg-navy
,文本从Checking...
更改为User Okay
。
我可以做到这一点,但它不仅会影响启动请求的按钮,还会影响所有按钮。
这是我的代码:
$(document).on("click", ".btnCheckUser", function() {
var Item_Number = $(this).attr("Item_Number");
/************************** MANIPULATE BUTTONS *******************************************************************************/
$(this).removeClass('bg-purple').addClass('bg-aqua');
$(this).html('Checking ...');
$(this).attr("disabled", true);
$('.btnViewUser').attr("disabled", true);
/******************************* PROCESS AJAX **************************************************************************/
var value = {
Item_Number: Item_Number
};
$.ajax({
url: "./plugins/serverside/CheckUserStatus",
type: "POST",
data: value,
success: function(data, textStatus, jqXHR) {
var data = jQuery.parseJSON(data);
if (data.result == 1) {
$(this).removeClass('bg-aqua').addClass('bg-danger');
$("#CheckUser").html('Failed!');
$('.btnCheckUser').attr("disabled", false);
$('.btnViewUser').attr("disabled", false);
setTimeout(function() {
var table = $('#User_Table').DataTable();
table.ajax.reload(null, false);
}, 3500);
} else if (data.result == 2) {
//------------------------ IF User Okay -------------------------------------------------------------------------------------------------------------------
$("#CheckUser").removeClass('bg-aqua').addClass('bg-navy');
$("#CheckUser").html('User Okay');
$('.btnCheckUser').attr("disabled", false);
$('.btnViewUser').attr("disabled", false);
}
我如何解决这个问题,并且只影响启动请求的按钮,但在加载请求时仍然禁用所有按钮?
发布于 2018-07-06 01:23:06
你好,这真的很简单,你要做的是
function TheClickerFunction(){
$("body").on("click",".YourButton",function(){
//this will only affect the clicked element
$(this).attr("disabled",true);
});
}
$(document).ready(function(){
TheClickerFunction();
});
/*
i think creating a global counter and increment it on each element would b better*/
var GlobalCounter= 0;
function DynamicBuilder(){
var stringBuilder="";
for(var i = 0; i< lengthOfYourElement ; i++){
GlobalCounter+=1;
stringBuilder+="<input type='submit' id='myButton"+GlobalCounter+"'></input>";
}
$("body").append(stringBuidler);
}
in this way each time a click is made
$(".yourClass").click(function(){
var elementID = $(this).attr("id");
//here you can do what ever you want with its id
})
*/
https://stackoverflow.com/questions/51196762
复制相似问题