How to disable a link in javascript only if a certain "if" condition is met

Question

Below is my code:

document.getElementById('association-search-popup1').onclick = function () 
{
    var myval= document.getElementsByName("AgreementType_1_input")[0].value;
    if (myval=== "")
    {
        $("#association-search-popup1").off('click');             
        alert("Please select agreement type");
    }
};

HTML: Anchor tag which needs to be disabled:

<a id="association-search-popup1" style="display: inline-block;" 
href="javascript:void(0)" class="associate-and-inherit-link" data- 
associatedentityname="Logistics" data- 
associatedentityid="1E74AF39-6B99-4685-9C3F-5F47DB47A410" data- 
associationname="Logistics" data-associatedmultiplicity="Many" 
data-inheritancepriority="2" data-associatedentitydisplayname="Logistics 
Contract" data-hasviewpermission="true" data- 
metadata_display_name="Logistics" data- 
metadata_display_name_plaintext="Logistics" data- 
islookup="true" data_lookupentityname="Logistics">
                        <span>Logistics</span>
                        <span class="inherit_details_add" style="float: right 
!important;"></span>
</a>

In this code, when the dropdown with name= "AgreementType_1_input" does not have any value, it disables the click event handler of an anchor tag with id="association-search-popup1" but after when I select a value from the dropdown, the click event remains disabled.

Can anyone help me to write it in such as way that the link disables only when "if" condition is met and is enabled if the condition is not met

Answer 1

Please use EITHER jQuery OR Vanilla JS

The .off is likely not what you want

However without seeing your code, I can only disable it or block a click, if there is another event handler, you may need to set and test a data-attribute in the other code you have not shown us

Using classList.toggle to disable

jQuery:

const $ICMAgreement = $("[name=ICMAgreementType_1_input]").eq(0);
const toggleLink = function() {
  $("#association-search-popup1").toggleClass("isDisabled", $ICMAgreement.val() === "")
};
$ICMAgreement.on("change", toggleLink)
  .change(); // on load

.isDisabled {
  pointer-events: none;
  /* use e.preventDefault() instead if you want */
  cursor: not-allowed;
  /* the not-allowed cursor to show */
  color: currentColor;
  opacity: 0.5;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ICMAgreementType_1_input">
  <option value="">Please select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<a id="association-search-popup1" style="display: inline-block;" href="javascript:void(0)" class="associate-and-inherit-link" ... >
  <span>Logistics</span>
  <span class="inherit_details_add" style="float: right 
!important;"></span>
</a>

Ditto Vanilla

const ICMAgreement = document.querySelector("[name=ICMAgreementType_1_input]");
const toggleLink = function() {
  document.getElementById("association-search-popup1").classList.toggle("isDisabled", ICMAgreement.value === "")
}

ICMAgreement.addEventListener("change", toggleLink)
toggleLink(); // on load

.isDisabled {
  pointer-events: none;
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

<select name="ICMAgreementType_1_input">
  <option value="">Please select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<a id="association-search-popup1" style="display: inline-block;" href="javascript:void(0)" class="associate-and-inherit-link" ...>
  <span>Logistics</span>
  <span class="inherit_details_add" style="float: right 
!important;"></span>
</a>

• jQuery block click

$("#association-search-popup1").on('click', function(e) {
  if ($("[name=ICMAgreementType_1_input]").eq(0).val() === "") {
    console.log("Nope. Click not happening")
    e.preventDefault();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ICMAgreementType_1_input">
  <option value="">Please select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<a id="association-search-popup1" style="display: inline-block;" href="javascript:void(0)" class="associate-and-inherit-link" ... >
  <span>Logistics</span>
  <span class="inherit_details_add" style="float: right 
!important;"></span>
</a>

• Ditto Vanilla

document.getElementById("association-search-popup1").addEventListener('click', function(e) {
  if (document.querySelector("[name=ICMAgreementType_1_input]").value === "") {
    console.log("Nope, click not happening");
    e.preventDefault();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ICMAgreementType_1_input">
  <option value="">Please select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<a id="association-search-popup1" style="display: inline-block;" href="javascript:void(0)" class="associate-and-inherit-link" ... >
  <span>Logistics</span>
  <span class="inherit_details_add" style="float: right 
!important;"></span>
</a>

Answer 2

You can add a class to the target. The class will have pointer-events property

 $("#association-search-popup1").addClass('disableClick');  


.disableClick{
 pointer-events:none;
 cursor: no-drop
}