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
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>
$("#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>
You can add a class to the target. The class will havepointer-events property
$("#association-search-popup1").addClass('disableClick');
.disableClick{
pointer-events:none;
cursor: no-drop
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.