尽管该链接被禁用,但它仍然是可点击的。
<a href="/" disabled="disabled">123n</a>
如果它是禁用的,我可以使它不可点击吗?我应该使用JavaScript吗?
尽管该链接被禁用,但它仍然是可点击的。
<a href="/" disabled="disabled">123n</a>
如果它是禁用的,我可以使它不可点击吗?我应该使用JavaScript吗?
当前回答
您可以使用以下解决方案之一:
HTML
<a>link</a>
JavaScript
<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>
CSS
<a href="www.page.com" disabled="disabled">link</a>
<style type="text/css">
a[disabled="disabled"] {
pointer-events: none;
}
</style>
其他回答
超链接没有disabled属性。如果你不想要某些东西被链接,那么你需要移除<a>标签。
或者,你可以删除它的href属性-尽管这有其他的用户体验和可访问性问题,在下面的评论中指出,所以不建议。
适合我的变体:
<script>
function locker(){
if ($("a").hasClass("locked")) {
$("a").removeClass('locked').addClass('unlocked');
$("a").attr("onClick","return false");
} else {
$("a").css("onclick","true");
$("a").removeClass('unlocked').addClass('locked');
$("a").attr("onClick","");
}
}
</script>
<button onclick="locker()">unlock</button>
<a href="http://some.site.com" class="locked">
<div>
....
<div>
</a>
HTML:
<a href="/" class="btn-disabled" disabled="disabled">123n</a>
CSS:
.btn-disabled,
.btn-disabled[disabled] {
opacity: .4;
cursor: default !important;
pointer-events: none;
}
如果你需要用Javascript禁用laravel上的链接,这是我的解决方案:
链接(blade.php):
<a href='/link/to/path' class='btn btn-primary mt-3' onclick='disableLink(this)'>Confirmar</a>
. css文件
.isDisabled {
cursor: not-allowed;
opacity: 0.5;
}
a[aria-disabled="true"] {
color: currentColor;
display: inline-block; /* For IE11/ MS Edge bug */
pointer-events: none;
text-decoration: none;
}
.js文件
function disableLink(link) {
// 1. Add isDisabled class to parent element
link.parentElement.classList.add('isDisabled');
// 2. Store href so we can add it later
link.setAttribute('data-href', link.href);
// 3. Set aria-disabled to 'true'
link.setAttribute('aria-disabled', 'true');
}
function enableLink(link) {
// 1. Remove 'isDisabled' class from parent span
link.parentElement.classList.remove('isDisabled');
// 2. Set href
link.href = link.getAttribute('data-href');
// 3. Remove 'aria-disabled', better than setting to false
link.removeAttribute('aria-disabled');
}
参考:https://css-tricks.com/how-to-disable-links/
你可以使用:
<a href="/" onclick="return false;">123n</a>