how to disabled the onclick function if user did not have access for that function?-CodePudding

I have user access function that have data like this. Data read from API

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

this is how I check the condition for the data. Condition for user access data.

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

but I have problem to call the class deleteBtn in <span> because in this line of code did not have button.

  <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>

How do I add the condition in my user access statement so I can use it in my <span> without adding the <button> ?

CodePudding user response：

First of all you can refactor this code so instead of:

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

Can be just:

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

And the second thing, you can in your callback function:

deleteMsg(par) {
if (!e.allowDel)
return false;

// Your existing code...
}

Also you can add some class on your link, so it can add some kind of "disabled" class there...

For example:

if (!e.allowDel) $(selectorToLink).addClass('disabled-link');

.disabled-link {
  pointer-events: none;
}