DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 使用JavaScript腳本無法直接改變Asp.net中Checkbox控件的Enable屬性的解決方法
使用JavaScript腳本無法直接改變Asp.net中Checkbox控件的Enable屬性的解決方法
編輯:關於JavaScript     

 今天工作中遇到個小問題,情況如下,當我在後台頁面中設置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>

之前“冗余的”父節點,現在沒有了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved