I have a link button inside a <td>
which I have to disable. This works on IE but not working in Firefox and Chrome.
Structure is - Link inside a <td>
. I cannot add any container in the <td>
(like div/span)
I tried all the following but not working on Firefox (using 1.4.2 js):
$(td).children().each(function () {
$(this).attr('disabled', 'disabled');
});
$(td).children().attr('disabled', 'disabled');
$(td).children().attr('disabled', true);
$(td).children().attr('disabled', 'true');
Note - I cannot de-register the click function for the anchor tag as it is registered dynamically. AND I HAVE TO SHOW THE LINK IN DISABLED MODE.
I would do something like
something like this should work. You add a class for links you want to have disabled and then you return false when someone click them. To enable them just remove the class.
you cannot disable a link, if you want that click event should not fire then simply
Remove
theaction
from that link.For More Info :- Elements that can be Disabled
I think a lot of these are over thinking. Add a class of whatever you want, like
disabled_link
.Then make the css have
.disabled_link { display: none }
Boom now the user can't see the link so you won't have to worry about them clicking it. If they do something to satisfy the link being clickable, simply remove the class with jQuery:
$("a.disabled_link").removeClass("super_disabled")
. Boom done!There is one other possible way, and the one that I like best. Basically it's the same way lightbox disables a whole page, by placing a div and fiddling with z-index. Here is relevant snippets from a project of mine. This works in all browsers!!!!!
Javascript (jQuery):
and in html
So the resizer finds the anchor's (the images are just arrows) locations and places the disabler on top. The disabler's image is a translucent grey square (change the width/height of the disablers in the html to match your link) to show that it is disabled. The floating allows the page to resize dynamically, and the disablers will follow suit in windowResizer(). You can find suitable images through google. I have placed the relevant css inline for simplicity.
then based on some condition,
To disable link to access another page on touch device.
Bootstrap 4.1 provides a class named
disabled
andaria-disabled="true"
attribute.example"
More is on getbootstrap.com
So if you want to make it dynamically, and
you don't want to care if it is button or ancor
than in JS script you need something like thatBut be carefull
The solution only works on links with classes
btn btn-link
.Sometimes bootstrap recommends using
card-link
class, in this case solution will not work.