How to disable anchor tag using one click

Question

I'm using an ul had my nav bar Items :

<ul  id="mainN" class="nanGroup" ng-show="lCntr.only == 'mainNav'">

    <li >
     <a class="btn btn-small btn-revert"ng-click="lCntr.profile()"></a>
    </li>

    <li>
     <a class="btn btn-small btn-revert"ng-click="lCntr.settings()"></a>
    </li>

    <li class="dropdown">
     <a class="btn btn-small btn-revert" ng-click="lCntr.logout()"></a>
    </li>
</ul>

and I'm trying to make the selected (profile,settings,..)disable when it's selected by using this script :

    $(document).ready(function ($) {
     $('#mainN li a').on('click',function (event) {

     event.preventDefault();

     $(this).addClass('disabled');
     });
    });

it's work but just if I clicked it twice and I want it to be disabled from the first click I've been tried every thing like ($(this).prop('disabled' ,true)) any advice ??

Use a real `button` element rather than an anchor. Then you can use `prop("disabled", true)`. — Heretic Monkey, Jun 22 '18 at 18:04

score 0 · Answer 1 · answered Jun 22 '18 at 18:11

Try something like this:

$(document).ready(function($) {

  $('#mainN li a:not(.disabled)').on('click', function(event) {
    event.preventDefault();
    $(event.currentTarget).unbind("click");
    
    alert("Working");
    $(this).addClass('disabled');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainN" class="nanGroup" ng-show="lCntr.only == 'mainNav'">

  <li>
    <a class="btn btn-small btn-revert" ng-click="lCntr.profile()">One</a>
  </li>

  <li>
    <a class="btn btn-small btn-revert" ng-click="lCntr.settings()">Two</a>
  </li>

  <li class="dropdown">
    <a class="btn btn-small btn-revert" ng-click="lCntr.logout()">Three</a>
  </li>

score -1 · Answer 2 · answered Jun 22 '18 at 18:04

Add a disabled class and eliminate any disabled links from your jQuery selector:

$(document).ready(function ($) {
     $(document).on('click', "#mainN li a:not(.disabled)", function (event) {
        console.log("do an action here: " + $(this).attr("ng-click"));
        $(this).addClass('disabled');
     });
});

.btn {
  display:inline-block;
  padding:3px 5px;
  background-color:blue;
  color:White;
  cursor:pointer;
  margin  2px
}
.btn.disabled {
  color:#121212;
  background-color:lightgray
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul  id="mainN" class="nanGroup" ng-show="lCntr.only == 'mainNav'">
    <li >
     <a class="btn btn-small btn-revert" ng-click="lCntr.profile()">Profile</a>
    </li>

    <li>
     <a class="btn btn-small btn-revert" ng-click="lCntr.settings()">Settings</a>
    </li>

    <li class="dropdown">
     <a class="btn btn-small btn-revert" ng-click="lCntr.logout()">Logout</a>
    </li>
</ul>

How to disable anchor tag using one click

2 Answers2