如何仅在满足某个" if“条件时禁用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“的dropdown没有任何值时，它会禁用带有id=”name= -search-Popup1“的锚定标记的单击事件处理程序，但当我从下拉列表中选择一个值后，单击事件仍然处于禁用状态。

有没有人可以帮我写一下，链接只有在" if“条件满足时才禁用，在不满足条件时才启用

Answer 1

请使用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 block单击

​

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

​

• 同上，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

您可以向目标添加一个类。该类将具有pointer-events属性

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


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