禁用不适用于我的按钮
Posted
技术标签:
【中文标题】禁用不适用于我的按钮【英文标题】：Disable not working for my button 【发布时间】：2015-01-03 05:37:25 【问题描述】：我一直在尝试制作自己的按钮，但由于某种原因，我似乎无法让 :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;
【问题讨论】：
没有禁用属性... 【参考方案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 个问题：在悬停期间，它移动了其他元素。 （这里的解决方案***.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();
);
【讨论】：
以上是关于禁用不适用于我的按钮的主要内容，如果未能解决你的问题，请参考以下文章