Maison > Article > interface Web > Comment supprimer l'attribut « désactivé » d'un élément d'entrée HTML à l'aide de JavaScript ?

Comment supprimer l'attribut « désactivé » d'un élément d'entrée HTML à l'aide de JavaScript ?

WBOYavant: 2023-08-31 13:17:02695parcourir

如何使用 JavaScript 从 HTML 输入元素中删除“禁用”属性？

En HTML, nous pouvons utiliser des éléments d'entrée pour recueillir les commentaires des utilisateurs en créant un formulaire ou de toute autre manière. Il existe différents types d'éléments de saisie, tels que des cases à cocher, des boutons radio, du texte, des chiffres, etc.

Nous pouvons utiliser la propriété « désactivé » avec chaque élément pour désactiver le champ de saisie et empêcher les utilisateurs d'interagir avec l'élément de saisie. Dans certains cas, nous devons ajouter et supprimer l'attribut désactivé à l'aide de JavaScript. Par exemple, nous souhaitons prendre les numéros de carte panoramique des utilisateurs dont l'âge est supérieur à 18 ans. Nous devons donc activer le champ de saisie de la carte panoramique uniquement si l'utilisateur saisit un âge supérieur à 18 ans en supprimant la propriété désactivée de JavaScript.

Ici, nous apprendrons différentes approches pour supprimer l'attribut désactivé de l'élément d'entrée HTML à l'aide de JavaScript.

Utilisation de la méthode removeAttribute()

Dans la première approche, nous utiliserons la méthode removeAttribute() pour supprimer l'attribut désactivé. Il est utilisé pour supprimer tout attribut de l'élément HTML que nous passons en paramètre de la méthode.

Syntaxe

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour utiliser la méthode removeAttribute() pour supprimer l'attribut « désactivé » de l'élément d'entrée.

element.removeAttribute("disabled");

Dans la syntaxe ci-dessus, nous avons passé le nom de l'attribut, qui est « désactivé », comme paramètre de la méthode.

Exemple

Dans l'exemple ci-dessous, nous avons défini le champ de saisie de texte dans la partie HTML. Chaque fois que les utilisateurs cliquent sur le bouton, il appelle la fonction removeDisabled().

Dans la fonction remvoeDisabled(), on accède à l'élément d'entrée par son identifiant. Après cela, nous exécutons la méthode removeAttribute() en prenant l'élément d'entrée comme référence et en passant « désactivé » comme paramètre.

Dans la sortie, les utilisateurs peuvent constater qu'ils ne peuvent pas interagir avec l'élément d'entrée avant de cliquer sur le bouton, mais ils le peuvent après avoir cliqué sur le bouton.

<html>
<body>
    <h3> Using the <i> removeAttribute() </i> method to remove disabled attribute from HTML input element </h3>
    <input type = "text" name = "first name" id = "name" value = "Shubham" disabled>
    <button onclick = "removeDisabled()"> Remove Disabled </button>
    <script>
        function removeDisabled() {
            let name = document.getElementById("name");
            name.removeAttribute("disabled");
        }
    </script>
</html>

Modification de la propriété « désactivée »

Dans cette approche, nous modifierons la valeur de la propriété « désactivé » plutôt que de supprimer la propriété désactivée d'un élément HTML. La propriété « désactivé » prend la valeur booléenne. La valeur par défaut de la propriété désactivée est « vrai », mais nous pouvons la définir sur « faux », et cela fonctionnera de la même manière lorsque nous supprimons la propriété « désactivé » de n'importe quel élément d'entrée.

Syntaxe

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour modifier la valeur de la propriété désactivée sur false.

input.disabled = false;

Exemple 1

Dans l'exemple ci-dessous, nous avons créé plusieurs éléments de saisie de texte, tous désactivés par défaut. En JavaScript, nous accédons à tous les éléments d'entrée et utilisons la méthode forEach() pour effectuer des itérations dans la liste de nœuds de l'entrée. Dans la méthode forEach(), nous modifions la valeur de la propriété désactivée de chaque entrée en false.

Dans la sortie, les utilisateurs peuvent observer que tous les éléments d'entrée sont intraitables après avoir cliqué sur le bouton.

<html>
<body>
    <h3> setting the <i> disable property value </i> to remove disabled attribute from HTML input element  </h3>
    <!-- creating multiple text inputs -->
    <input type = "text" id = "myText" value = "Hello World!" disabled> <br> <br>
    <input type = "text" id = "second" value = "How are you?" disabled>
    <button onclick = "removeDisabled()"> Remove Disabled </button>
    <script>
        function removeDisabled() {
            let textsInput = document.querySelectorAll("input[type='text']");
            textsInput.forEach((input) => {
                input.disabled = false;
            });
        }
    </script>
</html>

Exemple 2

Dans l'exemple ci-dessous, nous avons créé plusieurs entrées de cases à cocher et ajouté des attributs désactivés à toutes les cases à cocher pour les désactiver. Dans la fonction removeDisable(), nous accédons à toutes les cases à cocher et modifions la propriété « désactivée » de chaque case à cocher.

<html>
<body>
    <h3> Setting the <i> disable property value </i> to remove disabled attribute from HTML input element.</h3>
    <!-- creating multiple checkboxes -->
    <input type = "checkbox" value = "male" disabled> male
    <input type = "checkbox" value = "female" disabled> female
    <input type = "checkbox" value = "other" disabled> Other
    <button onclick = "removeDisabled()"> Remove Disabled </button>
    <script>
        function removeDisabled() {
            let checkboxes = document.querySelectorAll('input[type="checkbox"]');
            for (let i = 0; i < checkboxes.length; i++) {
                checkboxes[i].disabled = false;
            }
        }
    </script>
</html>

Nous avons appris à supprimer la propriété désactivée des éléments d'entrée à l'aide de JavaScript. Dans la première approche, nous avons utilisé la méthode removeAttribute(), qui supprime la propriété désactivée d'un élément d'entrée. Dans le deuxième élément, nous modifions la valeur de la propriété désactivée plutôt que de la supprimer de l'élément HTML, mais nous parvenons à atteindre notre objectif d'activer l'élément d'entrée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html Boolean if for foreach checkbox require using Attribute Property function default this input Access

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Un aperçu plus approfondi de CanJS : partie 2Article suivant：Un aperçu plus approfondi de CanJS : partie 2

Articles Liés

Voir plus