Html “禁用”是锚标记的有效属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18711317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is 'disabled' a valid attribute for an anchor tag
提问by basarat
If I have the following simple code segment:
如果我有以下简单的代码段：
<div ng-app="myApp">
<a ng-disabled='true' ng-click="value1=123">click me</a>
<button ng-disabled='true' ng-click="value2=123">click me</button>
=={{value1}}==
=={{value2}}==
</div>
As you can see from the fiddle : http://jsfiddle.net/basarat/czVPG/the button is not clickable and ng-click (which is simply a jquery on('click',function(){})) does not execute. However it does execute for the anchor tag.
正如您从小提琴中看到的：http: //jsfiddle.net/basarat/czVPG/该按钮不可点击，并且 ng-click（它只是一个 jquery on('click',function(){})）不会执行。但是它确实为锚标记执行。
- Is it because disabled is not a valid attribute for an anchor tag?
- If it is why does it still trigger the dom click event when a button does not?
- 是因为禁用不是锚标记的有效属性吗？
- 如果是这样，为什么当按钮没有时它仍然会触发 dom click 事件？
采纳答案by basarat
Disabled is not a valid attribute for the anchor tag. Source : http://dev.w3.org/html5/html-author/#the-a-element
Disabled 不是锚标记的有效属性。来源：http: //dev.w3.org/html5/html-author/#the-a-element
回答by Tushar Gupta - curioustushar
Read w3c Linkand the-a-element
disable is not valid with anchor tags
禁用对锚标记无效
instead you can do it by event.preventDefault()
相反，您可以通过event.preventDefault()
$('a').click(function(event){
event.preventDefault();
});
回答by Math chiller
no it doesnt work with the atag you can use the jquery event.preventDefault()referance here
不，它不适用于a标签，您可以在此处使用 jquery 引用event.preventDefault()
回答by apostolov
If you don't want to use javascript to disable the anchor (as pruposed in other responses) you can just omit the hrefattributeand the anchor wont work and will even change it's styling.
如果您不想使用 javascript 禁用锚点（如其他响应中所建议的那样），您可以省略该href属性，锚点将无法工作，甚至会更改其样式。
<a>A disabled anchor</a>Note: I know my answer doesn't directly talk about the disableattribute but the info might still be useful for the audiance, as it was for me.
注意：我知道我的回答并没有直接谈论disable属性，但这些信息可能对观众仍然有用，就像对我一样。
回答by Howard Brown
Removing the href or setting it to '#' when you actually want to disable it is kind of a pain if the anchor is to be enabled later, because you need to reset the href to whatever value it should link to. Instead, I just add a disable attribute to the tag and a click event handler and some css. This way the anchor can easily be seen to be disabled, but if enabled where it would go.
如果稍后要启用锚点，则在您实际想要禁用它时删除 href 或将其设置为“#”是一种痛苦，因为您需要将 href 重置为它应该链接到的任何值。相反，我只是向标签添加了一个禁用属性和一个点击事件处理程序和一些 css。通过这种方式，可以很容易地看到锚点被禁用，但如果启用它会去哪里。
Yes, disabled isn't supported attribute by the anchor tab, but the CSS attribute selector does find it and so does jQuery's. So, while the following solution is a mixed jQuery/javaScipt/CSS, it does provide a somewhat nicer way to disable/enable anchors, which supports dynamically adding/removing the disabled attribute to/from the tag with javaScript. Note that this has only been tested and found to work in Chrome.
是的，锚选项卡不支持禁用属性，但 CSS 属性选择器确实找到了它，jQuery 也是如此。因此，虽然以下解决方案是混合的 jQuery/javaScipt/CSS，但它确实提供了一种更好的方法来禁用/启用锚点，它支持使用 javaScript 向/从标记动态添加/删除禁用属性。请注意，这仅经过测试并发现在 Chrome 中有效。
<style>
a:disabled, /* This doesn't do anything, but hopefully one day ... */
a[disabled] /* This activates when the disabled attribute is added. */
{
cursor: not-allowed; /* Indicate that the link is not to be click! */
}
</style>
<script>
// Use the same css selectors to find all of the disabled anchors ...
$( 'a:disabled, a[disabled]' )
.click( function( event ) {
//
// Prevent disabled anchors from doing their click action ...
//
// Need to recheck that the anchor is still disabled, because the
// jQuery that initially found this anchor and set this event
// handler doesn't affect the anchor after the event is set.
//
// Is this anchor still disabled?
if( this.hasAttribute( 'disabled' ) ) {
event.preventDefault();
}
} );
</script>
Here is a codePen demo: https://codepen.io/howardb1/pen/XWrEKzP
这是一个 codePen 演示：https://codepen.io/howardb1/pen/XWrEKzP
回答by Jabare Mitchell
The button is an input type, that's why disable works. Anchors don't work the same. Try giving your a tag an id and disabling using javascript.
该按钮是一种输入类型，这就是禁用工作的原因。锚的作用不一样。尝试给你的标签一个 id 并使用 javascript 禁用。
<div ng-app="myApp">
<a id="someid" ng-click="value1=123" >click me</a>
<button ng-disabled='true' ng-click="value2=123">click me</button>
=={{value1}}==
=={{value2}}==</div>
After that can disable the element using js and it should behave as input types do.
之后可以使用 js 禁用元素，它的行为应该与输入类型一样。
function DisableButton() {
var submitButton = document.getElementById("someid");
if (submitButton != null) {
submitButton.setAttribute('disabled', 'disabled');
}
}
Make sure you're getting the right client id of your element.
确保您获得了元素的正确客户端 ID。
