Question

我一直在努力制作自己的按钮，出于某种原因，我似乎无法获得：禁用正常工作。我想要禁用该按钮（不响应点击和灰色文本）。我错过了什么？

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;

Answer 1

a标记没有已禁用的属性。查看doc可以获得的有效属性。只有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

Answer 2

在您的HTML中：

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

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

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

然后在你的CSS中，只需用你的按钮替换灰色的color属性：

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

Answer 3

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

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

</div>

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

Answer 4

没有禁用属性... 如果你需要在a上禁用click事件，可以在click事件中使用JQuery的preventDefault（）：

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

根据event.preventDefault()

Answer 5

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

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

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

}）;

禁用不能为我的按钮工作

5 个答案: