Control whether a link is clickable or not – Jquery ajax

AFAICT you are 90% of the way there, you’re just missing a few key details.

Working JSFiddle.

1. e.preventDefault(): As already mentioned in other answers/comments, you need to prevent the default action which the event triggers, otherwise the browser will just begin the process of navigating to the link while your JS is still running.

2. anchor.click() will trigger a click on your link, which will … start the whole process again! You’ll get stuck in a recursive loop. The click is done, you now want to navigate. To open a new window in Javascript, use window.open(href, '_blank');

3. If your link is already authorised, you need to do the same as if the AJAX authorises it the first time around. Instead of return true;, you need to do the same window.open() again.

Also a suggestion – the convention for using GET or POST is:

• use POST when changing data, eg creating a user, or making a purchase, logging in – something which should not happen 2x if you hit reload;
• use GET when viewing data, no state changes, no harm in reloading;

AFAICT you are simply querying some customer details, so this should be a GET request.

I’ve modified you code to work with JSONPlaceholder – a dummy REST API which provides JSON data for this kind of situation (where we need to test an AJAX call with a working response), so we can simulate your AJAX call. It only accepts GET requests, so I’ve changed your POST to GET, and I’ve updated the test of the response based on the dummy data it sends back. You can see the output we’re working with for User ID 1, and User ID 2.

Since you need to do the "go to the link" chunk of code in more than one place, I extracted that to a function you can call, so we don’t need to duplicate that code in several places.

I also added a few extra alerts so you can be sure of what is happening.

See it all in action on JSFiddle.

Javascript:

// A function to actually open the new page, since we need to do this in
// more than one place.
function goToLink(anchor) {
    let href=anchor.attr('href');
    window.open(href, '_blank');
}

$(".lnkCustomer").click(function(e) {

  // Prevent the default action this event would normally trigger from 
  // happening - in this case, navigating to the target href.
  e.preventDefault();

  var customerNo = $(this).data('customerno');
  var anchor = $(this);

  // Check for authorized, and open the link if so
  if (anchor.data("authorized")) {
    alert("Already authorized, let's go!");
    goToLink(anchor);
  }
  
  // https://jsonplaceholder.typicode.com/ is a dummy REST JSON generator.
  // Let's use it to simulate your AJAX call.  User ID 1's username is Bret,
  // user ID 2's username is Antonette.  Let's use customerNo in the URL to
  // retrieve user ID 1 or 2, and simply allow the click if the username is
  // Antonette.
  
  // First build the URL:
  let url = 'https://jsonplaceholder.typicode.com/users/' + customerNo

  $.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',
    data: {
      customerNo: customerNo
    },
    cache: false,
    success: function(result) {
      if (result.username === 'Antonette') {
        // Authorize and go
        alert("Authorization success, let's go!");
        anchor.data("authorized", true);
        goToLink(anchor);
      } else {
        // Show a message in a alert or div
        alert('Not authorized');
      }
    }
  });

  // Default to false (Do not process anchor)
  return false;
});

HTML:

<ul>
  <li><a class="lnkCustomer" href="https://google.com/" target="_blank" data-customerno="1">Google (no go)</a></li>

  <li><a class="lnkCustomer" href="https://stackoverflow.com/" target="_blank" data-customerno="2">Stackoverflow (allowed)</a></li>
</ul>