Maison > Article > interface Web > Solution au problème selon lequel la propriété Enable du contrôle Checkbox dans Asp.net ne peut pas être directement modifiée à l'aide des compétences JavaScript script_javascript

Solution au problème selon lequel la propriété Enable du contrôle Checkbox dans Asp.net ne peut pas être directement modifiée à l'aide des compétences JavaScript script_javascript

WBOYoriginal: 2016-05-16 15:39:172010parcourir

J'ai rencontré un petit problème au travail aujourd'hui. La situation est la suivante. Lorsque j'ai défini la valeur Enable de Checkbox sur false dans la page d'arrière-plan, j'ai utilisé un script (chk.disabled = false) dans la page front-end. et n'a pas pu changer désactivé. La valeur est fausse et le code est le suivant :

Code de la réception :

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

Code back-end :

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

Pourquoi cela se produit-il ? Jetons un coup d'œil au code source du HTML, comme suit :

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

Il s'avère que lorsque l'attribut Enable du contrôle Checkbox est faux, la sortie vers HTML devient un ensemble de contrôles (élément), et non un contrôle comme prévu.

Option 1 :

Dans le code ci-dessus, bien que nous ayons modifié l'attribut désactivé du contrôle chkBlog en false, l'attribut désactivé du nœud parent (45a2772a6b6107b401db3c9b82c049c2) du contrôle chkBlog est toujours désactivé. Cela pose un problème de priorité. Généralement, la priorité du nœud parent est supérieure à celle du nœud enfant. Par conséquent, nous devons modifier la valeur désactivée du nœud parent. Le code du script client ci-dessus doit être légèrement modifié, comme suit. :

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

Ajoutez uniquement le code mis en évidence ci-dessus.

Option 2 :

Si vous utilisez la première option, vous devez ajouter une instruction supplémentaire pour modifier l'attribut désactivé du nœud parent lorsqu'il y a de nombreux endroits à modifier, ce sera plus gênant et cela n'est pas conforme à la logique générale du code et. est un code redondant. Existe-t-il un autre moyen plus simple ? Oui~, il suffit de modifier le code d'arrière-plan, comme suit :

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

C'est-à-dire que nous ne modifions pas l'attribut Enable de Checkbox, mais modifions le contenu HTML généré par Checkbox vers le client via les paramètres d'attribut dans InputAttributes, comme suit :

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

Le nœud parent auparavant "redondant" a désormais disparu.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery implémente un panneau accordéon extensible et réduit menu_jqueryArticle suivant：jQuery implémente un panneau accordéon extensible et réduit menu_jquery

Articles Liés

Voir plus