Disable link with jquery

Question

Good afternoon, you guys, I’m having a problem trying to disable a link using jquery. The problem is this, There is a table that lists the types of roles a user can have in the system that presents the information in this way :

the buttons of the options have the btnView, btnEdit and btnRemove classes respectively
so far blz. I want the editing and removal options to be done only by administrators users.
my controller is returning me 1 if the logged in user has Amin and null permission otherwise and adding this value to an input of type Hidden. It is already returning me the permission right however, in javascript, when I command it disable the button if the user is not an administrator nothing happens.

my file is as follows: HTML

   <a href="#" class="show-modal btn btn-info btn-sm btnShow" data-id="{{$papel->id}}" >
      <i class="material-icons">remove_red_eye</i>
   </a>
   <a href="#" class="edit-modal btn btn-warning btn-sm btnEdit"   data-toggle="modal"data-target="#create" data-id="{{$papel->id}}" id="btnEdit">
      <i class="material-icons" style="color:white">edit</i>
   </a>
   <a href="#" data-toggle="modal"data-target="#dropPapel" class="delete-modal btn btn-danger btn-sm btnRemove" >
        <i class="material-icons">delete</i>
    </a>

Javascript

<script>
  $(document).ready(function() {

       if($('#userAdmin').val()!=1){
        console.log('não é admin')
        $('.btnRemove').attr('disabled','disabled')
        $('.btnShow').attr('disabled','disabled')
        $('.btnEdit').attr('disabled','disabled') 
    }
</script>

I can’t find the problem, if I try to hide the link I can, but if I try to disable it, not even if I tag the disabled property or put attr('disabled',true) does not work. I had already used this same way to disable elsewhere without any problem, but this part is not working. The code is falling in the right condition, is printing on the console the message I sent, but does not disable links
If anyone could shed some light on this, I’d be very grateful. Thanks in advance

Answer 1

Dude your problem is that one <a> does not have the global attribute disabled, then in advance set disabled on it that won’t work.

disabled is for input, buttons and other form elements, not for link.

Your jQuery is working and setting the attr() in the element, only it remains "clickable" because HTML does not understand what is a disabled="disabled" in a link (element <a>)

This is the list of Permitted Attributes on the tag <a>, and the attribute disabled is not on the list! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

---

See that if you change the <a> by a <button> he’s gonna stay disabled already the <a> nay.

	$(document).ready(function() {

		if ($('#userAdmin').val() != 1) {
			console.log('não é admin')
			$('.btnRemove').attr('disabled', 'disabled')
			$('.btnShow').attr('disabled', 'disabled')
			$('.btnEdit').attr('disabled', 'disabled')
		}
	});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<button class="edit-modal btn btn-warning btn-sm btnEdit" data-toggle="modal" data-target="#create" data-id="{{$papel->id}}" id="btnEdit">
	<i class="material-icons">isso é um button</i>
</button>

<a href data-toggle="modal" data-target="#dropPapel" class="delete-modal btn btn-danger btn-sm btnRemove">
	<i class="material-icons">isso é link</i>
</a>

---

Tip

If you want to keep the link, you can "disable it" using some CSS properties like pointer-event:none, and user-select:none. In addition tb state to set the property tabindex="-1" for element not to be accessible by keyboard.

$(document).ready(function() {
  if ($('#userAdmin').val() != 1) {
    console.log('não é admin')
    $('.desabilitado').css({"background-color": "yellow", "cursor": "default", "pointer-events": "none", "user-select": "none"}).attr('tabindex', -1);
  }
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<a href="X" class="desabilitado">link "desabilitado"</a><br>
<a href="X" class="normal">link "normal"</a>

Answer 2

You’re probably wearing one Event Handler to listen to clicks on links. If you are using a version 1.7 or higher, use the method .off() to remove click events from elements:

$('.btnRemove, .btnShow, .btnEdit').off('click');

If you are using a version earlier than 1.7, use .unbind():

$('.btnRemove, .btnShow, .btnEdit').unbind('click');

---

If you do not specify an event on .off(), will remove all events to which the element may be linked:

$('.btnRemove, .btnShow, .btnEdit').off();

I’ll show you an example using .off():

$(".btnEdit, .btnRemove, .btnShow").click(function(){
   console.log("link clicado");
});

function removeEvento(){
   $(".btnEdit, .btnRemove, .btnShow").off();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btnEdit" href="#">Editar</a><br>
<a class="btnRemove" href="#">Remover</a><br>
<a class="btnShow" href="#">Mostrar</a>
<br><br>
Clique no botão abaixo para remover os cliques dos links acima:<br>
<button onclick="removeEvento()">Remover click</button>