Disable a href links in php-javascript
-
02-01-2020 - |
Question
I have 4 links in my page(.phtml file) as follows
<ul id="fileMenu" class="contextMenu">
<li class="add"><a id ="addbtn" href="#add" style="display:none;">Add</a></li>
<li class="download"><a href="#download">Download</a></li>
<li class="rename"><a href="#rename">Rename</a></li>
<li class="del"><a href="#delete">Delete</a></li>
<li class="copypath"><a href="#copypath">Copypath</a></li>
</ul>
I want to disable the add,rename and delete links Just disable it from UI .
User should be able to see it but no click event should be performed(linksshould be grayed out) .
I have used
disable="disabled"
display =none;
but they are not serving the purpose.
Any other way this would work out ?
Solution
I would use this CSS to visually disable a link:
.disable {
position: relative;
}
.disable:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.disable a {
color: gray;
cursor: default;
}
Then in order to disable a link you would put a class disable
on corresponding li
:
<li class="download disable"><a href="#download">Download</a></li>
What it does is basically overlays a link with transparent pseudo element :before
.
Another solution could be using pointer-events: none
rule but it's not well supported in IE.
Demo: http://jsfiddle.net/LPz2Z/1/
OTHER TIPS
If you are using jQuery, you might want to do this
$(function() {
$('#addbtn').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
}
i'm not sure it's the best way but it can do the trick ,
if you use
pointer-events: none; in your css
or if you want to call it from javascript:
elem.style.display.pointerEvents = "none";
to disabled interaction with your users.
Use pointer-events:none;
<a style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>
There are a few options. With plain old javascript, you can do, for example:
<a href="mylink.html" onclick="return false;">Download</a>
or
<a href="javascript: void(0);">Download</a>
With jQuery you can easily disable a lot of links:
<a href="mylink.html" class="disabled">Download</a>
<a href="anotherlink.html" class="disabled">Delete</a>
<script>
jQuery(document).ready(function($) {
$('a.disabled').on('click', function(e) {
e.preventDefault();
});
});
</script>
And you can even use CSS!
<a href="mylink.html" class="disabled">Download</a>
<style type="text/css">
a.disabled { pointer-events: none; }
</style>
Although, it wouldn't surprise you, IE <= v9 (if I'm correct) doesn't support this... And on most browsers you can't force the browser to use a pointer as a cursor...
Even this served the purpose
$("#fileMenu").disableContextMenuItems('#add');
$("#fileMenu").disableContextMenuItems('#rename');
$("#fileMenu").disableContextMenuItems('#delete');
as I am using contextMenu class in my ul list.