javascript - 禁用不适用于我的按钮

标签 javascript html css

我一直在尝试制作自己的按钮,但出于某种原因,我似乎无法使 :disable 正常工作。我希望按钮被禁用(不响应点击和灰色文本)。我错过了什么?

http://jsfiddle.net/aj4n0ymd/

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标签没有禁用属性。查看文档以了解可以具有的有效属性。只有inputsselecttextareas可以有 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>

引用资料

MDN <a> element

关于javascript - 禁用不适用于我的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26784125/

相关文章:

javascript - 无法保存带有可拖动对象的 Canvas

javascript - 将 Google AdWords 转化跟踪 (javascript) 代码添加到 PrestaShop/Smarty 页面中

javascript - 从 json 字符串中提取某些列和行

javascript - 获取 Canvas 鼠标在 Canvas 上的位置

html - 如何证明水平列表的合理性?

javascript - 可调整大小的 div 不响应百分比高度

html - 为什么 <ul> 中的样式只影响第一个 <li>?

css 菜单 : ie7&8 problem, css 未使用?

javascript - 我如何使用 jquery 或 javascript 验证日期、月份和年份的 3 个单独输入字段?

html - CSS Animation 正在 Google Chrome 中创建动画效果