今天工作中遇到個小問題，情況如下，當我在後台頁面中設定Checkbox的Enable的值為false時，我在前端頁面中使用指令碼(chk.disabled = false)，無法改變disabled的值為false，代碼如下：
前台代碼：
前台代碼<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function foo() {
var chk = document.getElementById("<%=chkBlog.ClientID %>");
if (chk.disabled) {
chk.disabled = false;
}
else {
chk.disabled = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkBlog" runat="server" Text="http://owen-zhang.cnblogs.com"></asp:CheckBox>
<asp:Button ID="btnCheck" runat="server" Text="Client check" OnClientClick="foo();return false;" />
</div>
</form>
</body>
</html>
後台代碼：
protected void Page_Load(object sender, EventArgs e)
{
this.chkBlog.Enabled = false;
}
為什麼會出現這種情況呢，讓我們看一下html的源碼，如下：
<span disabled="disabled"> <input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" /> <label for="chkBlog">http://owen-zhang.cnblogs.com</label></span>
原來Checkbox控制項在Enable屬性為false時，輸出到Html中變成了一組控制項(element)，而不是我們預想的一個控制項。
方案一：
在上面的代碼中，雖然我們改變了chkBlog控制項的disabled屬性為false，但是chkBlog控制項的父節點(<span>)的disabled屬性卻還是disabled。這個就有一個優先順序的問題了，一般是父節點的優先順序要大於子節點，所以，我們要改變父節點的disabled的值，上面的用戶端指令碼代碼要做一點小的修改，如下：
代碼
<script type="text/javascript">
function foo() {
var chk = document.getElementById("<%=chkBlog.ClientID %>");
if (chk.disabled) {
chk.parentNode.disabled = false;
chk.disabled = false;
}
else {
chk.parentNode.disabled = true;
chk.disabled = true;
}
}
</script>
只有加上上面高亮顯示的代碼。
方案二：
使用方式情節一的話，就必須添加一條額外的改變父節點disabled屬性的語句，當要修改的地方比較多的時候，就比較麻煩了，而且也不符合一般的代碼邏輯，有冗餘的代碼。有沒有其他更簡練的辦法呢？有～，我們只需要修改後台代碼，如下：
protected void Page_Load(object sender, EventArgs e)
{
this.chkBlog.InputAttributes.Add("disabled", "disabled");
}
也就是，我們不改變Checkbox的Enable屬性，而是通過InputAttributes中的屬性設定，改變了Checkbox輸出到用戶端的Html內容，如下：
<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" />
<label for="chkBlog">http://owen-zhang.cnblogs.com</label>
之前“冗餘的”父節點，現在沒有了。
關於Checkbox的InputAttributes屬性的詳細資料可以參考以下連結。
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.inputattributes.aspx
代碼：http://files.cnblogs.com/owen-zhang/CheckboxClientDisabled.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
