CSS定义inputdisabled样式
也可以动态⽣成span元素替换编辑控件
<form id="form1" runat="server">
<div>
<input id="Text1" type="text" value="111" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("<span style='color:red' id='Text1_span'>" + $("#Text1").val() + "</span>").insertAfter("#Text1");
$("#Text1").bind("change", function() {  $("#Text1_span").val( $(this).val()); });
$("#Text1").css("display","none");
})
</script>
disabled 属性规定应该禁⽤ input 元素。
被禁⽤的 input 元素既不可⽤，也不可点击。可以设置 disabled 属性，直到满⾜某些其他的条件为⽌（⽐如选择了⼀个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可⽤。
以下三种写法都可以禁⽤ input
1. <p><input type="text" disabled value="已禁⽤"/></p>
2. <p><input type="text" disabled="disabled" value="已禁⽤"/></p>
3. <p><input type="text" disabled=disabled value="已禁⽤"/></p>
被禁⽤的 input 默认显⽰灰⾊，可以通过CSS修改样式。
1. 利⽤CSS3 :disabled 伪元素定义
1. //Chrome Firefox Opera Safari
2. input:disabled{
3. border: 1px solid #DDD;
4. background-color: #F5F5F5;
5. color:#ACA899;
6. }
2. 利⽤属性选择符定义
1. //IE6 failed
2. input[disabled]{
cssclass属性3. border: 1px solid #DDD;
4. background-color: #F5F5F5;
5. color:#ACA899;
6. }
3. 利⽤类来定义
1. input.disabled{
2. border: 1px solid #DDD;
3. background-color: #F5F5F5;
4. color:#ACA899;
5. }
最终结果：
1. input[disabled],input:disabled{
2. border: 1px solid #DDD;
3. background-color: #F5F5F5;
4. color:#ACA899;
5. }
6. //IE6 Using Javascript to add CSS class "disabled"
7. * html input.disabled{
8. border: 1px solid #DDD;
9. background-color: #F5F5F5;
10. color:#ACA899;
11. }
注意：IE8 bug 由于IE8 不识别 :disabled 导致input[disabled],input:disabled样式失效，可以考虑单独来写，或者直接使⽤input[disabled]。有兴趣的可以看我的DEMO

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。