禁用不适用于我的按钮答案

【问题标题】：Disable not working for my button禁用不适用于我的按钮
【发布时间】：2015-01-03 05:37:25
【问题描述】：

我一直在尝试制作自己的按钮，但由于某种原因，我似乎无法让 :disable 正常工作。我希望禁用该按钮（不响应单击和灰色文本）。我错过了什么？

HTML：

<!doctype html>
<div id="menu"> 
    <a class="button" disabled="true" id="button">Click</a>
</div>

CSS：

.button {
    display: block;
    width: 40%;
    text-align: center;
    float: left;
    color: #000000;
    font-size: 10px;
    padding: 0.5em 1em;
    text-decoration: none;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}
.button:hover {
    background: #f0f0f0;
    text-decoration: none;
}
.button:active {
    background: rgb(150, 150, 150);
    background-image: linear-gradient(to bottom, rgb(150, 150, 150), rgb(200, 200, 200));
    text-decoration: none;
}
.button:disabled {
    color:rgb(150, 150, 150);
}

此外，这将与 javascript 一起使用。这在js中是否足以改变禁用状态？

button = document.querySelector("#button");
button.disabled = true;

【问题讨论】：

没有禁用属性...

标签： javascript html css

【解决方案1】：

a 标签没有禁用属性。查看文档以了解可以具有的有效属性。只有inputs 或select 或textareas 可以具有禁用属性。

您可以删除 href 或添加返回 false 的点击处理程序。

$("#button").on("click", function() {
  alert("ok");
});

.button {
  display: block;
  width: 40%;
  text-align: center;
  float: left;
  color: #000000;
  font-size: 10px;
  padding: 0.5em 1em;
  text-decoration: none;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
  background: transparent;
  border: none;
}
.button:hover {
  background: #f0f0f0;
  text-decoration: none;
}
.button:active {
  background: rgb(150, 150, 150);
  background-image: linear-gradient(to bottom, rgb(150, 150, 150), rgb(200, 200, 200));
  text-decoration: none;
}
.button:disabled {
  color: rgb(150, 150, 150);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" disabled="disabled">
  <input type="button" class="button" id="button" disabled="disabled" value="Click" />
</div>

参考文献

MDN <a> element

【讨论】：

最后我没有使用你的解决方案，但是你关于标签没有 disabled 属性的评论让我寻找更多信息，最终我登陆了这个网站：davidwalsh.name/html5-buttonswhich我相信这是一个非常好的解释。使用按钮会导致 2 个问题：在悬停期间，它移动了其他元素。（这里的解决方案stackoverflow.com/questions/556153/…）默认情况下按钮有一个边框，但为此只需执行 button {border:0;} 即可。
希望你能看到这个MDN :)

【解决方案2】：

在您的 HTML 中：

正确的方法是disabled="disabled" 而不是这个disabled="true"，但这对<a...></a> 链接没有任何作用。

您可以添加onclick 事件来避免链接重定向：

<a class="button" onclick"return false;" id="button">Click</a>

然后在您的 CSS 中，只需将 color 属性替换为按钮的灰色即可：

.button {
  ...
  color: grey;
  ...
}

【讨论】：

【解决方案3】：

很简单，你的元素必须是一个按钮

<!doctype html>
<div id="menu"> 
    <button class="button" disabled="disabled" id="button">Click</button>

</div>

工作小提琴： http://jsfiddle.net/aj4n0ymd/3/

【讨论】：

【解决方案4】：

没有禁用属性... 如果您需要禁用 a 上的点击事件，您可以在点击事件上使用 JQuery 的 preventDefault()：

$( "a" ).click(function( event ) {
    event.preventDefault();
});

根据event.preventDefault()

【讨论】：

【解决方案5】：

它应该是带有一点点javascript的按钮或锚标记。

http://jsfiddle.net/jasongennaro/QGWcn/ [Jsfiddle]

$('#link').click(function(e){
e.preventDefault();

});

【讨论】：