Html- 如何禁用 <a href>？ [复制]答案

【问题标题】：Html- how to disable <a href>? [duplicate]Html- 如何禁用 <a href>？ [复制]
【发布时间】：2015-04-03 18:41:39
【问题描述】：

我创建了一个在点击时打开模式窗口的按钮。

<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" 不能正常工作。如何禁用它？

【问题讨论】：

只删除href 属性？
如果您真的不想创建链接，请不要使用<a /> 元素。您可以将cursor:pointer 添加到 CSS 中的任何元素。
不要将a 用于按钮，它们不能被禁用（不是原生的，只是解决方法）。使用button 标签。
模态仍然打开
另外，是什么让你认为data-role 真的会有所作为？默认情况下，data-* 属性根本不做任何事情——它们的存在是为了包含一些信息。不过，像 jQuery 这样的库会使用它们。

标签： html href

【解决方案1】：

您可以使用 CSS 来完成此操作：

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

&lt;a href="somelink.html" class="disabled"&gt;Some link&lt;/a&gt;

或者您可以使用 JavaScript 来阻止这样的默认操作：

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

【讨论】：

【解决方案2】：

我创建了一个按钮...

这就是你出错的地方。你还没有创建了一个按钮，你已经创建了一个锚元素。如果您改用 button 元素，则不会出现此问题：

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

如果您打算继续使用a 元素，至少应该将role 属性设置为"button" 并完全删除href 属性：

<a role="button" ...>

完成后，您可以介绍a piece of JavaScript which calls event.preventDefault() - 这里event 是您的点击事件。

【讨论】：

【解决方案3】：

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

应该可以的，希望对我有所帮助！

【讨论】：

【解决方案4】：

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

这将阻止默认操作。

【讨论】：

尽管很有可能，考虑到 jQuery 没有被标记，在进一步澄清之前，您不应该发布答案。您在这里的第一种方法应该是发表评论，询问 您在使用 jQuery 吗？ 而且，考虑到您没有使用，您绝对应该做的是在回答前加上一个 If you are使用 jQuery....