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

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

WBOY

リリース： 2016-05-16 15:39:17

オリジナル

2016 人が閲覧しました

今日、仕事で小さな問題が発生しました。バックグラウンドページでチェックボックスの有効値を 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>

ログイン後にコピー

以前は「冗長」だった親ノードはなくなりました。