【发布时间】：2019-11-23 16:10:05
【问题描述】：
我创建了一个切换开关，允许系统管理员激活/停用帐户的登录访问权限。
在管理员点击开关切换（开关从状态 1 移动到 0）后，它会通过警报框提示确认（您要激活/停用此帐户吗？是 | 否），每当我单击“否” , 我希望它恢复到之前的状态（从 0 到 1）。
如果状态为“1”[帐户已激活]，我成功地做到了这一点，但是当状态相反时，从状态 0 到 1，开关切换不会返回到之前的状态，并且卡在状态 1。
它仍然会发送正确的 POST 命令（例如，如果帐户已激活则停用该帐户，反之亦然），但视觉显示是错误的。
这是我的代码。
切换开关的Javascript
var chk;
$(document).on('change', '.btn-change-status', function(e) {
e.preventDefault();
chk = $(this);
var switch_status = $(this).attr('data-status');
var account_status = (switch_status == 1) ? 0 : 1;
var id = $(this).attr('data-id');
var confirm_alert = (switch_status == 1) ? confirm("Are you sure you want to deactivate this account?") : confirm("Are you sure you want to activate this account?");
if (confirm_alert == true) {
$.ajax({
url: "/user/update-status",
type: "POST",
data: {
_token: "{{csrf_token()}}",
id: id,
status: account_status
},
success: function(data) {
if (data.success === true) {
alert("Account Successfully Updated!");
location.reload();
}
}
});
}
else {
if(chk.checked) {
chk.prop("checked", false);
}
else {
chk.prop("checked", true);
}
}
});
编辑：添加了开关的 HTML 部分，尽管它仍然在 javascript 中，因为我将它附加到了一个数据表。
数据表的 HTML
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-table"></i>
Accounts Management</div>
<div class="card-body">
<button type="button" id="btn-add-account" class="btn btn-primary">Add Account</button>
<div class="table-responsive mt-3">
<table class="table table-bordered dt-responsive" id="table-accounts" width="100%" cellspacing="0">
<thead>
<tr>
<th class="hidden">ID</th>
<th>Username</th>
<th>Email</th>
<th>Role</th>
<th>Date Created</th>
<th style="width: 15.5%">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="hidden">ID</th>
<th>Username</th>
<th>Email</th>
<th>Role</th>
<th>Date Created</th>
<th style="width: 15.5%">Actions</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
数据表的Javascript
$(document).ready(function() {
getRoles();
var accounts;
$('#account-management').addClass('active');
accounts = $("#table-accounts").DataTable({
ajax: {
url: "/users/get-all-users",
dataSrc: ''
},
responsive:true,
"order": [[ 7, "desc" ]],
columns: [
{ data: 'id'},
{ data: 'username' },
{ data: 'email'},
{ data: 'role.id'},
{ data: 'created_at'},
{ data: null,
render: function ( data, type, row ) {
var html = "";
if (data.status == 1) {
html += '<span class="switch switch-sm"> <input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'" checked> <label for="'+data.id+'"></label></span>';
} else {
html += '<span class="switch switch-sm"> <input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'"> <label for="'+data.id+'"></label></span>';
}
html += "<button type='button' class='btn btn-primary btn-sm btn-edit-account mr-2' data-id='"+data.id+"' data-account='"+data.id+"'>Edit</button>";
html += "<button type='button' class='btn btn-secondary btn-sm btn-reset-password' data-id='"+data.id+"' data-account='"+data.id+"'><i class='fas fa-key'></i></button>";
// <button type='button' class='btn btn-primary btn-sm btn-edit' data-id='"+data.id+"' data-account='"+data.id+"'>Edit</button>
// html += "<button class='btn btn-danger btn-sm btn-delete' data-id='"+data.id+"' data-account='"+data.id+"'>Remove</button>";
return html;
}
},
],
columnDefs: [
{ className: "hidden", "targets": [0]},
{ "orderable": false, "targets": 4 }
]
});
谢谢！
【问题讨论】：
标签： javascript jquery html