suchen

Heim >Web-Frontend >js-Tutorial >Lösung des Problems, dass die Enable-Eigenschaft des Checkbox-Steuerelements in Asp.net nicht direkt mit JavaScript-Skriptkenntnissen geändert werden kann

Lösung des Problems, dass die Enable-Eigenschaft des Checkbox-Steuerelements in Asp.net nicht direkt mit JavaScript-Skriptkenntnissen geändert werden kann

WBOY
WBOYOriginal
2016-05-16 15:39:172069Durchsuche

Ich bin heute bei der Arbeit auf ein kleines Problem gestoßen. Die Situation ist wie folgt und konnte nicht deaktiviert werden. Der Wert ist falsch und der Code lautet wie folgt:

Rezeptionscode: 

<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>

Backend-Code: 

  protected void Page_Load(object sender, EventArgs e)
  {
    this.chkBlog.Enabled = false;
  }

Warum passiert das? Schauen wir uns den Quellcode von HTML wie folgt an: 

<span disabled="disabled">
　　<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" />
　　<label for="chkBlog">http://owen-zhang.cnblogs.com</label>
</span>

Es stellt sich heraus, dass, wenn das Enable-Attribut des Checkbox-Steuerelements falsch ist, die Ausgabe in HTML zu einer Reihe von Steuerelementen (Elementen) wird und nicht zu einem Steuerelement, wie wir erwartet hatten.

Option 1:

Obwohl wir im obigen Code das Attribut „disabled“ des chkBlog-Steuerelements in „false“ geändert haben, ist das Attribut „disabled“ des übergeordneten Knotens (45a2772a6b6107b401db3c9b82c049c2) des chkBlog-Steuerelements immer noch deaktiviert. Dies stellt ein Prioritätsproblem dar. Im Allgemeinen ist die Priorität des übergeordneten Knotens höher als die des untergeordneten Knotens. Daher muss der obige Client-Skriptcode wie folgt geändert werden : 

<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>

Fügen Sie nur den oben hervorgehobenen Code hinzu.

Option 2:

Wenn Sie Option 1 verwenden, müssen Sie eine zusätzliche Anweisung hinzufügen, um das deaktivierte Attribut des übergeordneten Knotens zu ändern. Wenn viele Stellen geändert werden müssen, ist dies problematischer und entspricht nicht der allgemeinen Codelogik ist überflüssiger Code. Gibt es einen anderen einfacheren Weg? Ja~, wir müssen nur den Hintergrundcode wie folgt ändern: 

  protected void Page_Load(object sender, EventArgs e)
  {
    this.chkBlog.InputAttributes.Add("disabled", "disabled");
  }

Das heißt, wir ändern nicht das Enable-Attribut von Checkbox, sondern ändern den HTML-Inhalt, der von Checkbox an den Client ausgegeben wird, über die Attributeinstellungen in InputAttributes wie folgt: 

<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" />
<label for="chkBlog">http://owen-zhang.cnblogs.com</label>

Der zuvor „redundante“ übergeordnete Knoten ist jetzt weg.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery implementiert das erweiterbare und reduzierte Akkordeon-Panel „menu_jquery“.Nächster Artikel：jQuery implementiert das erweiterbare und reduzierte Akkordeon-Panel „menu_jquery“.

In Verbindung stehende Artikel

Mehr sehen