今天工作中遇到個小問題,情況如下,當我在後台頁面中設定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控制項的父節點()的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>
之前「冗餘的」父節點,現在沒有了。