[.NET Freamwork3.5]IEでのDisaibledにハマった話

すごく簡単そうな仕様にも関わらずハマったのでメモ。

環境

• .NET Freamwork3.5
• WebForm
• IE11

仕様

• 初期表示時、特定の条件をサーバー側で判定し、対象のチェックボックスを非活性(Enabled=false)
• 他のチェックボックスの変更で非活性から活性に切り替え(jQueryの実装)

発生した事象

初期表示で非活性だった場合に、チェックボックスを活性状態にできない。

実装

サーバー側

this.HogeCheckbox.Enabled = false;

クライアント側

$("#<%=this.HogeCheckbox.ClientID%>").prop("disabled", false);

原因

サーバー側でinput要素を非活性にした場合、以下のようにinput要素を囲むspanタグが生成され、そのspanタグにもdisabled=disabledが設定されていた。
この状態でID指定でチェックボックスを操作するとinput要素のdisabledは操作できても、spanタグのdisabledはそのままの状態で残ってしまう。
その結果、非活性状態から活性状態に変更できない状態となった。
なお、タイトルにある通りこの動作はIEのみで発生し、FireFox, Chromeでは想定通り動作した。

<span disabled="disabled">
  <input type="checkbox" id="xxx_HogeCheckbox" disabled="disabled" />
</span>

対策

ASP.NET WebFormを使わない。
disabled操作を全てクライアント側でおこなうことでも対応できるが今回はクライアント側での操作時にspanタグのdisabledを消すことで対応した。

$("#<%=this.HogeCheckbox.ClientID%>").parent().removeAttr("disabled");
$("#<%=this.HogeCheckbox.ClientID%>").prop("disabled", false);