使用JavaScript腳本無法直接改變Asp.net中Checkbox控制項的Enable屬性的解決方法

使用JavaScript腳本無法直接改變Asp.net中Checkbox控制項的Enable屬性的解決方法_javascript技巧

WBOY

發布： 2016-05-16 15:39:17

原創

2015 人瀏覽過

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

登入後複製

之前「冗餘的」父節點，現在沒有了。