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

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

WBOY

Libérer： 2016-05-16 15:39:17

original

2044 Les gens l'ont consulté

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>

Copier après la connexion

Code back-end :

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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");
  }

Copier après la connexion

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>

Copier après la connexion

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