【分享+求救】disabled 能不能使链接失效

WebAdvocate 2010-08-12 08:36:00
我们知道,disabled 属性可以让一个 INPUT 输入框失效,可以使 INPUT 按钮失效。然后,鼠标点击无效,并且内容也无法修改。所以,如果需要将一个元素置成不可用,disabled 无疑是最方便快捷的方式了。
<input type="text" value="text" onclick="alert('click it!')"> &
<input type="text" value="disabled text" disabled onclick="alert('click it!')">
<br/>
<input type="button" value="button" onclick="alert('click it!')"> &
<input type="button" value="disabled button" disabled onclick="alert('click it!')">
以上两组INPUT,第一组是文本框,第二组是按钮,每组中第二个 INPUT 都使用了 disabled 属性,在浏览器中打开,试试看,点击每组的第二个 INPUT 是不是没有用。

本以为它适用于所有的元素,所以在做网页的时候发现一个“奇怪” 的现象。

我想做一个类似 toolbar 的JS组件,其中 toolbar 可以将一组 A 标签模拟成多个并排的按钮。其中有一项功能设置是这样的:在初始化该 toolbar 时,可以屏蔽某个工具按钮的功能。 这个功能是用来做类似于权限管理的东西的。

问题来了。<a>标签的 disabled 属性只在 IE 中“有效”,在其它浏览器中是无效的。譬如
<a href="#" onclick="alert('clicked!!')" disabled> test this disabled link</a>
在各浏览器中的截图如下:
IE中:

其他浏览器中:


在 IE 中链接显示为灰色,而其它浏览器里显示的都是正常链接的样式。虽然如此,在IE中<a>标签也没有真正失效,你点击之后还是会发生跳转的,只是“看上去”是失效了而已。其他浏览器中根本没有任何特殊的表现。

老习惯,翻查标准。
终于在 W3C HTML4.01 的 属性表 中找到了它。原来,属性 “disabled” 只应用于以下表单类元素:
● BUTTON
● INPUT
● OPTGROUP
● OPTION
● SELECT
● TEXTAREA

注意,只对表单元素有效果。呃,没有A元素......

再来看看,disabled 到底做了些什么。当表单元素被设为disabled之后,它会:
● 无法再获得输入焦点;
● 被跳过Tab键导航(即通过Tab键在控件直接跳转输入焦点时,此元素将被忽略);
● 不是successful controls。 (有兴趣的童鞋可以参考 规范第17.12.1节 )

一切都明了了……
对非表单元素使用 disabled 属性是不对的,当然也包括 DIV 和 SPAN元素。
另外,即使在 IE 里看上去是失效了,实际上元素并没有真正失效,只是外观被影响罢了(赤裸裸的欺骗)。所以,在页面开发中应避免在非表单控件类元素上使用disabled 属性,这将造成IE浏览器与其他浏览器产生不同的渲染效果。若需要使一个普通元素呈现出 IE 中为其设置disabled 属性后的效果,可以用CSS设计其展现形式,以保证在所有浏览器下达到一致的显示。

回到 toolbar 的问题,不用 disabled,如何屏蔽某个按钮的功能呢??各位有没有好办法呢? 高分奉上。

更多兼容性问题:
【分享】浏览器兼容性问题目录
...全文
774 点赞 收藏 9
写回复
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
guilipan 2010-09-16
阻止按钮的默认行为不就可以了么
回复
zjmotion 2010-08-27

window.onload= function (){
var aObj = document.getElementById('toolBarId').getElementsByTagName('a');
for(var i = 0; i < aObj.length; i++)
{
aObj[i].disabled = true;
aObj[i].onclick = function () { return false; }
}
}
回复
rinoya111 2010-08-24
关注中
回复
tizll521 2010-08-24
如果是超链接的话 禁用的时候 改变超链接为javascript:void(0)和改变这个链接的样式 从而禁用这个按钮
这个方法应该可行的
回复
阿非 2010-08-15
当然你也可以切换样式,又或者其他DOM 操作 来实现 启用与禁用的转换。
回复
阿非 2010-08-15
其实你仍然可以使用 disabled 应用于超链接上

eg:


<html>
<head>
<script>
function GetState(obj){
if(obj.disabled)
return false;
return true;
}

var state=false;

function change(obj){
if(!state){
document.getElementById('a1').disabled=true;
obj.value='启用a1';
}
else{
document.getElementById('a1').disabled=false;
obj.value='禁用a1';
}
state=!state;
}
</script>
</head>
<body>
<a id='a1' href='http://bbs.csdn.net/' onclick='return GetState(this);' >csdn论坛</a>
<a id='a2' href='http://www.csdn.net' onclick='return GetState(this);' >csdn首页</a>

<input type='button' value='禁用a1' onclick='change(this);' />
</body>
</html>
回复
tizll521 2010-08-13
关注一下 我也不清楚啊
回复
发动态
发帖子
跨浏览器开发
创建于2010-06-28

5004

社区成员

解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
申请成为版主
社区公告
暂无公告