日期:2014-05-17  浏览次数:20385 次

如何根据 LinkButton 的Enabled属性 设置CSS样式
<asp:LinkButton ID="lkbtn" runat="server" CommandName="mod" Enabled='<%# (bool)(Eval("IsEnabled"))%>' CommandArgument='<%#Eval("ID")%>'>修改</asp:LinkButton>


如何在CSS文件中 根据LinkButton的Enabled的属性值 设置链接的颜色。
比如 LinkButton Enabled=true,ForeColor值为蓝色;
     LinkButton Enabled=false,ForeColor值为灰色。

版本较老的浏览器比如Chromium13.0 ,LinkButton被转成<a disabled="disabled"..>标签,我采用了属性选择器来控制样式。
table a
{
   text-decoration:none;
   color:#70c9e3;
}
table a[disabled="disabled"]
{
   color:#ccc; /*不可用颜色变灰*/
}

但是现在主流的浏览器、智能机浏览器都不支持这个disabled属性了,现在该怎么办?

------解决方案--------------------
首先disabled属性是input元素的标准属性,所有的浏览器均支持。在IE下面,非input元素同样支持该属性;但在其它浏览器下面,非input元素disabled后的样式虽然有改变但却达不到效果。见:http://www.w3school.com.cn/tags/att_input_disabled.asp

其次标准CSS2支持属性的选择器,如input[disabled]。IE6是不支持的。
http://www.w3school.com.cn/css/css_selector_attribute.asp

最后,要实现需求需要增加javascript,以jQuery为例,假设该LinkButton生成HTML后的ID为lkbn,想要灰掉后的样式名(class)为diabledLinkButton:
$(function(){
    var isDiabledLinkButton = $('#lkbn').attr('disabled') == 'disabled';
    if (isDiabledLinkButton ) $('#lkbn').attr('class', 'diabledLinkButton');
});


另外,你也可以在服务端用asp.net写类似的代码。比如:
<asp:LinkButton ID="lkbtn" runat="server" CommandName="mod" Enabled='<%# (bool)(Eval("IsEnabled"))%>' ForeColor='<%# (bool)(Eval("IsEnabled")) ? "black" : "gray"%>' CommandArgument='<%#Eval("ID")%>'>修改</asp:LinkButton>