如何讓 radio 亮起來

使用 Visual Studio 設計 Web Form 頁面時，當我使用了 RadioButtonList 控制項，且將該控制項的 Enable 屬性設為 false 時，一般都會得到一個很醜且灰濛濛的介面。

是否將 radio 裡面的文字刻意指定顏色給它，就可以有所改善呢？於是我簡單的加了 <font color="red"> 在裡面。

<asp:RadioButtonList ID="RadioButtonList1" runat="server" Enabled="False">
 <asp:ListItem Value="1"><font color="red">世界是平的</font></asp:ListItem>
 <asp:ListItem Value="2"><font color="red">體驗經濟時代</font></asp:ListItem>
 <asp:ListItem Value="3" Selected="True"><font color="red">太極拳道幾</font></asp:ListItem>
</asp:RadioButtonList>

實驗結果出爐，結果是：沒採工，一點反應都沒有。但有趣的是，以 chrome 、firefox 來開啟頁面，竟然是「有起色的(是紅的)」...

這點差異，倒是蠻有趣的。進一步去檢視網頁的原始碼可以發現：當我將 radiobuttonlist 的 enable 設為 false 後，它所產生出來的 html code，幾乎每個 html tag 都可以發現 disabled="disabled" 的影子。 甚至連 <input id="RadioButtonList1_0" type="radio" 的外面都還包了一個 <span disabled="disabled">。原來，只要是 html tag 裡面有定義 disabled="disabled"，則該 tag 的顏色，就會變成灰色，不管是哪個瀏覽器都一樣會有這個效果。只不過，當 tag 裡面，還有另一個 tag 時怎麼辦？對於 chrome、firefox 來說，他們分的比較細，他們允許每一個 tag 都有各自的呈現方式，外層 tag 並不會影響內層的 tag，大腸包小腸，誰說這兩個腸一定都非香腸不可呢？這問題的處理上，IE 就顯得簡化許多，只要是外層有設定 false，內層不管你怎麼設，都一定是灰的。甚至你可以做一個實驗，只要你在你的網頁的一開始就放一個 <span disabled="disabled">，並把 </span> 放到網頁內文的最後面，模擬將所有的頁面內容，通通都包進這個 <span disabled="disabled">，檢視一下結果會發現，使用 IE 瀏覽器，全部的控制項都變成灰色了，彷彿都不能動了一樣。但可別被它蒙蔽了，裡面的輸入方塊、按鈕...，每一個都還是可以敲、可以按，只不過顏色是灰色的而已；這奇特現象，在 firefox、chrome 則是不會見到的。

<table id="RadioButtonList1" disabled="disabled" border="0">

<tr>

<td><span disabled="disabled"><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="1" disabled="disabled" /><label for="RadioButtonList1_0"><font color="red">世界是平的</font></label></span></td>

</tr>
<tr>

<td><span disabled="disabled"><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="2" disabled="disabled" /><label for="RadioButtonList1_1"><font color="red">體驗經濟時代</font></label></span></td>

</tr>
<tr>

<td><span disabled="disabled"><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="3" checked="checked" disabled="disabled" /><label for="RadioButtonList1_2"><font color="red">太極拳道幾</font></label></span></td>

</tr>

</table>

所以，依據上面的說法，在 IE 瀏覽器，只要 radio button 不被 <span disabled="disabled"> 包圍住，理論上也是可以擺脫灰色的命運。那就再次試試看...

<input type="radio" value="A" name="ra1" checked="checked" disabled="disabled"><font 

color="red">paldin </font>
<input type="radio" value="A" name="ra1" disabled="disabled"><font color="red">lttlab </font>

還果真如此，所以在 IE 瀏覽器上，其實也是可以讓 disabled 的 radio button 有不一樣的顏色，只是我使用 Visual Studio 的 RadioButtonList 控制項，會自動幫我加入許多並非我想要的 html tag，導致不管我怎麼調顏色，都無法上色。

說了這麼多，那在 IE 瀏覽器上，是否有機會更改那些 Enable 設為 false 的控制項呢？由於我功力還不夠深厚，目前無法回答這問題，但偷吃步倒是有一招。

為了避免 IE 處理 disabled 屬性與其他人不同調，於是我就在頁面的開發上，就不事先去定義 RadioButtonList 的 Enable 屬性，而且也不從後端去設定它，改由透過前端的 javascript 或 jQuery 來完成。

ex:  $("input[type=radio]").attr("disabled", "disabled");

如此，只要一行指令，就可以讓所有頁面上的 radio button 無法作用，又能保有光鮮亮麗的色彩。