我一直在尝试制作自己的按钮,但出于某种原因,我似乎无法使 :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;
最佳答案
a标签没有禁用属性。查看文档以了解可以具有的有效属性。只有inputs
或 select
或 textareas
可以有 disabled 属性。
您可以删除 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>
引用资料
关于javascript - 禁用不适用于我的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26784125/