ホームページ > 記事 > ウェブフロントエンド > Asp.net の Checkbox コントロールの Enable プロパティを JavaScript script_javascript スキルを使用して直接変更できない問題の解決策
今日、仕事で小さな問題が発生しました。バックグラウンド ページでチェックボックスの有効値を false に設定したときに、フロントエンド ページでスクリプト (chk.disabled = false) を使用したのです。値は 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>
オプション 1:
上記のコードでは、chkBlog コントロールの disabled 属性を false に変更しましたが、chkBlog コントロールの親ノード () の 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>
オプション 2:
オプション 1 を使用する場合、親ノードの無効な属性を変更するための追加のステートメントを追加する必要があり、変更する箇所が多数ある場合はさらに面倒になり、一般的なコード ロジックに準拠しません。冗長なコードです。他にもっと簡単な方法はありますか?はい、次のように背景コードを変更するだけです:
protected void Page_Load(object sender, EventArgs e) { this.chkBlog.InputAttributes.Add("disabled", "disabled"); }
<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" /> <label for="chkBlog">http://owen-zhang.cnblogs.com</label>以前は「冗長」だった親ノードはなくなりました。