如何禁用onclick功能，如果用户没有访问该功能?

Question

我有用户访问功能，有这样的数据。从API读取的数据

"allowView": true,
"allowAdd" : true,
"allowEdit": false,
"allowDel" : false

这是我检查数据条件的方式。用户访问数据的条件。

e.allowView== true ? $("button.viewBtn").prop("disabled",false)  : $("button.viewBtn").prop("disabled",true);
e.allowAdd== true ? $("button.addBtn").prop("disabled",false)   : $("button.addBtn").prop("disabled",true);
e.allowEdit== true ? $("button.editBtn").prop("disabled",false)  : $("button.editBtn").prop("disabled",true);
e.allowDel== true ? $("button.deleteBtn").prop("disabled",false): $("button.deleteBtn").prop("disabled",true);

但是我在<span>中调用deleteBtn类有问题，因为在这行代码中没有按钮。

<span class="text-center"><a onclick ="deleteMsg('${emsg_id}')" class=""><span class="text-danger" data-toggle="tooltip" data-placement="top" title="Delete"><em class="icon ni ni-trash"></em></span></a></span>

我如何在我的用户访问语句中添加条件，以便我可以在不添加<button>的情况下在<span>中使用它?

Answer 1

首先你可以重构这段代码而不是:

e.allowView== true ? $("button.viewBtn").prop("disabled",false)  : $("button.viewBtn").prop("disabled",true);

可以是:

$("button.viewBtn").prop("disabled", e.allowView != true);

第二点，你可以在你的回调函数中:

deleteMsg(par) {
if (!e.allowDel)
return false;
// Your existing code...
}

你也可以在你的链接上添加一些类，这样它就可以添加一些"disabled"类有…

例如:

if (!e.allowDel) $(selectorToLink).addClass('disabled-link');
.disabled-link {
pointer-events: none;
}