HTML-如何禁用<a href>？

Question

我创建了一个按钮，点击它会打开一个模态窗口。

<a href="#"  data-toggle="modal" data-target="#myModal" class="signup-button gray-btn pl-pr-36" id="connectBtn"  data-role="disabled">Connect</a>

出于某种原因，data-role="disabled" 不起作用。如何禁用它？

- sarit rotshild

---

只是移除href属性吗？ - Oriol

如果你不真的想创建一个链接，就不要使用<a/>元素。在CSS中，你可以给任何元素添加cursor:pointer。 - pawel

不要使用“a”标签来创建按钮，因为它们无法被禁用（这只是一种变通方法）。请使用“button”标签。 - Luizgrs

模态框仍然打开。 - sarit rotshild

你想禁用链接的默认操作还是禁用模态框的打开？ - iivannov

另外，你认为 data-role 会有什么作用呢？默认情况下，data-* 属性并不会有任何作用 - 它们存在只是为了包含一些信息。不过像 jQuery 这样的库会利用它们。 - Christian

Answer 1

您可以使用CSS来实现这一点：

.disabled {
  pointer-events: none;
  cursor: default;
}

<a href="somelink.html" class="disabled">Some link</a>

或者您可以使用JavaScript来防止默认行为，例如：

$('.disabled').click(function(e){
    e.preventDefault();
})

- iivannov

---

好主意，但这不会禁用它。您仍然可以使用标签将焦点放在链接上，然后按Enter键以跟随它。 - Oriol

Answer 2

我创建了一个按钮...

你的问题出在这里。你并没有创建一个按钮，而是创建了一个锚点元素。如果你使用按钮元素，就不会有这个问题：

<button type="button" data-toggle="modal" data-target="#myModal" data-role="disabled">
    Connect
</button>

如果您要继续使用 a 元素，至少应该给它一个设置为 "button" 的 role 属性，并完全删除 href 属性：

<a role="button" ...>

完成上述步骤后，您可以引入调用event.preventDefault()的JavaScript代码片段 - 这里的event是指您的点击事件。

- James Donnelly

Answer 3

.disabledLink.disabled {pointer-events:none;}

应该没问题了，希望能帮到你！

- Grant Hood

Answer 4

<script>
    $(document).ready(function(){
        $('#connectBtn').click(function(e){
            e.preventDefault();
        })
    });
</script>

这将阻止默认操作。

- Sameer Shaikh

---

尽管很可能如此，但考虑到没有标记jQuery，您不应该在进一步澄清之前发布答案。您在这里的第一个方法应该是留下评论询问“您是否正在使用jQuery？”而且，考虑到您没有这样做，您应该明确说明您的答案前缀为“If you are using jQuery...”。 - James Donnelly