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

更新時間：2015年09月16日 10:46:39 投稿：mrr

今天工作中遇到個小問題，情況如下，當我在后臺頁面中設置Checkbox的Enable的值為false時，我在前端頁面中使用腳本(chk.disabled = false)，無法改變disabled的值為false，下面看看小編是怎么解決此問題的，需要的朋友一起了解了解吧

今天工作中遇到個小問題，情況如下，當我在后臺頁面中設置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;
  }

為什么會出現(xiàn)這種情況呢，讓我們看一下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控件的父節(jié)點(<span>)的disabled屬性卻還是disabled。這個就有一個優(yōu)先級的問題了，一般是父節(jié)點的優(yōu)先級要大于子節(jié)點，所以，我們要改變父節(jié)點的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>

只有加上上面高亮顯示的代碼。

方案二：

使用方案一的話，就必須添加一條額外的改變父節(jié)點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>

之前“冗余的”父節(jié)點，現(xiàn)在沒有了。

您可能感興趣的文章:

利用d3.js制作連線動畫圖與編輯器的方法實例
這篇文章主要給大家介紹了關于如何利用d3.js制作連線動畫圖與編輯器的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用d3.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-09-09
jquery庫文件略龐大用純js替換jquery的方法
jquery庫文件略龐大，因此在某些情況下就需要用純js替換jquery,需要的朋友可以參考下
2014-08-08
js跨瀏覽器的事件偵聽器和事件對象的使用方法
這篇文章主要介紹了js跨瀏覽器的事件偵聽器和事件對象的使用方法,需要的朋友可以參考下
2015-12-12
JavaScript中this指向的最全總結
前端的初學者在學習Javascript中this指向的時候經(jīng)常都會一頭霧水,尤其是在ES6箭頭函數(shù)出現(xiàn)之前,所以本篇文章主要是介紹和總結了各種情況下的this指向,希望對大家有所幫助
2023-12-12
Cropper.js入門之在HTML中實現(xiàn)交互式圖像裁剪
這篇文章主要為大家介紹了Cropper.js入門之在HTML中實現(xiàn)交互式圖像裁剪示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
通過MSXML2自動獲取QQ個人頭像及在線情況(給初學者)
通過MSXML2自動獲取QQ個人頭像及在線情況(給初學者)...
2007-01-01
JavaScript Sort 的一個錯誤用法示例
這篇文章主要介紹了JavaScript Sort 的一個錯誤用法示例,本文分析了一個Sort實例得到了這個錯誤用法并給出了解決方法,需要的朋友可以參考下
2015-03-03
codeMirror插件使用講解
codeMirror是一款十分強大的代碼編輯插件，提供了十分豐富的API，最近在項目中用到了這款插件，于是在這里給大家分享下使用方法和心得。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
微信小程序獲取地理位置及經(jīng)緯度授權代碼實例
這篇文章主要介紹了微信小程序獲取地理位置及經(jīng)緯度授權代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09
前端如何監(jiān)聽手機鍵盤是否彈起示例詳解
實際應用中我們會遇到監(jiān)聽按鍵輸入和鼠標點擊事件,這篇文章主要介紹了前端如何監(jiān)聽手機鍵盤是否彈起的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-02-02