使用JavaScript腳本無法直接改變Asp.net中Checkbox控件的Enable屬性的解決方法
今天工作中遇到個(gè)小問題，情況如下，當(dāng)我在后臺頁面中設(shè)置Checkbox的Enable的值為false時(shí)，我在前端頁面中使用腳本(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時(shí)，輸出到Html中變成了一組控件(element)，而不是我們預(yù)想的一個(gè)控件。
方案一：
在上面的代碼中，雖然我們改變了chkBlog控件的disabled屬性為false，但是chkBlog控件的父節(jié)點(diǎn)(<span>)的disabled屬性卻還是disabled。這個(gè)就有一個(gè)優(yōu)先級的問題了，一般是父節(jié)點(diǎn)的優(yōu)先級要大于子節(jié)點(diǎn)，所以，我們要改變父節(jié)點(diǎn)的disabled的值，上面的客戶端腳本代碼要做一點(diǎn)小的修改，如下：
<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é)點(diǎn)disabled屬性的語句，當(dāng)要修改的地方比較多的時(shí)候，就比較麻煩了，而且也不符合一般的代碼邏輯，有冗余的代碼。有沒有其他更簡練的辦法呢？有～，我們只需要修改后臺代碼，如下：
protected void Page_Load(object sender, EventArgs e)
{
this.chkBlog.InputAttributes.Add("disabled", "disabled");
}
也就是，我們不改變Checkbox的Enable屬性，而是通過InputAttributes中的屬性設(shè)置，改變了Checkbox輸出到客戶端的Html內(nèi)容，如下：
<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" /> <label for="chkBlog">http://owen-zhang.cnblogs.com</label>
之前“冗余的”父節(jié)點(diǎn)，現(xiàn)在沒有了。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何利用d3.js制作連線動畫圖與編輯器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用d3.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
jquery庫文件略龐大，因此在某些情況下就需要用純js替換jquery,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了js跨瀏覽器的事件偵聽器和事件對象的使用方法,需要的朋友可以參考下2015-12-12
前端的初學(xué)者在學(xué)習(xí)Javascript中this指向的時(shí)候經(jīng)常都會一頭霧水,尤其是在ES6箭頭函數(shù)出現(xiàn)之前,所以本篇文章主要是介紹和總結(jié)了各種情況下的this指向,希望對大家有所幫助2023-12-12
Cropper.js入門之在HTML中實(shí)現(xiàn)交互式圖像裁剪
這篇文章主要為大家介紹了Cropper.js入門之在HTML中實(shí)現(xiàn)交互式圖像裁剪示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
通過MSXML2自動獲取QQ個(gè)人頭像及在線情況(給初學(xué)者)
通過MSXML2自動獲取QQ個(gè)人頭像及在線情況(給初學(xué)者)...2007-01-01
JavaScript Sort 的一個(gè)錯(cuò)誤用法示例
這篇文章主要介紹了JavaScript Sort 的一個(gè)錯(cuò)誤用法示例,本文分析了一個(gè)Sort實(shí)例得到了這個(gè)錯(cuò)誤用法并給出了解決方法,需要的朋友可以參考下2015-03-03
codeMirror是一款十分強(qiáng)大的代碼編輯插件，提供了十分豐富的API，最近在項(xiàng)目中用到了這款插件，于是在這里給大家分享下使用方法和心得。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
微信小程序獲取地理位置及經(jīng)緯度授權(quán)代碼實(shí)例
這篇文章主要介紹了微信小程序獲取地理位置及經(jīng)緯度授權(quán)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
實(shí)際應(yīng)用中我們會遇到監(jiān)聽按鍵輸入和鼠標(biāo)點(diǎn)擊事件,這篇文章主要介紹了前端如何監(jiān)聽手機(jī)鍵盤是否彈起的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02