0

下面是我的代码：

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" 的锚标记的单击事件处理程序，但是当我从下拉列表中选择一个值后，点击事件仍然被禁用。

任何人都可以帮助我编写它，以便链接仅在满足“如果”条件时禁用，如果条件不满足则启用

4

2 回答 2

0

请使用 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>

于 2020-05-05T11:36:05.670 回答
0

您可以向目标添加一个类。该类将具有指针事件属性

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


.disableClick{
 pointer-events:none;
 cursor: no-drop
}
于 2020-05-05T11:40:06.810 回答