ホームページ  >  記事  >  ウェブフロントエンド  >  Asp.net の Checkbox コントロールの Enable プロパティを JavaScript script_javascript スキルを使用して直接変更できない問題の解決策

Asp.net の Checkbox コントロールの Enable プロパティを JavaScript script_javascript スキルを使用して直接変更できない問題の解決策

WBOY
WBOYオリジナル
2016-05-16 15:39:171994ブラウズ

今日、仕事で小さな問題が発生しました。バックグラウンド ページでチェックボックスの有効値を 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>
Checkbox コントロールの Enable 属性が false の場合、HTML への出力は、予想した 1 つのコントロールではなく、コントロール (要素) のセットになることがわかりました。

オプション 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");
  }
つまり、Checkbox の Enable 属性を変更するのではなく、次のように、InputAttributes の属性設定を通じて、Checkbox によってクライアントに出力される HTML コンテンツを変更します。

<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" />
<label for="chkBlog">http://owen-zhang.cnblogs.com</label>
以前は「冗長」だった親ノードはなくなりました。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。