Как отключить ссылку в javascript только при соблюдении определенного условия "если"

Question

Ниже мой код:

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: тег привязки, который необходимо отключить:

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

В этом коде, когда раскрывающийся список с именем = "AgreementType_1_input" "не имеет никакого значения, он отключает обработчик события щелчка для тега привязки с id =" association-search-popup1 ", но после того, как я выберу значение из раскрывающегося списка, событие щелчка останется отключенным.

Может ли кто-нибудь помочь мне написать это таким образом, чтобы ссылка отключалась только при выполнении условия «если» и включалась, если условие не выполнено

Answer 1

Вы можете добавить класс к цели. Класс будет иметь события-указатели свойство

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


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

Answer 2

Используйте ЛИБО jQuery ИЛИ Vanilla JS

.off, скорее всего, не то, что вам нужно

Однако, не видя вашего кода, я могу только отключить его или заблокировать щелчок , если есть другой обработчик событий, вам может потребоваться установить и протестировать атрибут данных в другом коде, который вы нам не показали

Использование classList.toggle для отключения

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>

То же ваниль

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 щелчок по блоку

$("#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>

• То же Ваниль

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>