Maison >interface Web >js tutoriel >Comparaison des méthodes JavaScript : activer ou désactiver les boutons à l'aide de jQuery et de Vanilla

Comparaison des méthodes JavaScript : activer ou désactiver les boutons à l'aide de jQuery et de Vanilla

PHPzoriginal: 2023-08-28 17:05:09610parcourir

比较 JavaScript 方法：使用 jQuery 与 Vanilla 启用或禁用按钮

Dans cet article, nous verrons comment activer ou désactiver les boutons à l'aide de JavaScript. Tout d’abord, nous verrons comment cela fonctionne en JavaScript simple, et plus tard, nous verrons comment l’implémenter à l’aide de jQuery.

JavaScript est l'une des technologies de base d'Internet. Il est utilisé par la plupart des sites Web et pris en charge par tous les navigateurs Web modernes sans avoir besoin de plugins. Dans cette série, nous discuterons de différents trucs et astuces qui vous aideront dans votre développement JavaScript quotidien.

Lorsque vous utilisez JavaScript, vous devez souvent activer ou désactiver des boutons en fonction de certaines actions. Généralement, lorsque vous travaillez avec des formulaires, vous souhaitez garder le bouton d'envoi désactivé jusqu'à ce que l'utilisateur remplisse tous les champs obligatoires du formulaire. Une fois que l'utilisateur a rempli tous les champs obligatoires, vous souhaitez l'activer automatiquement afin que l'utilisateur puisse cliquer sur un bouton pour soumettre le formulaire.

En HTML, les éléments des boutons ont leur propre état, vous pouvez donc le garder activé ou désactivé. Par exemple, vous pouvez garder un bouton désactivé pendant le chargement du formulaire. Plus tard, vous pourrez l'activer à l'aide de JavaScript.

Aujourd'hui, nous allons discuter de la façon d'activer ou de désactiver les boutons à l'aide de JavaScript avec quelques exemples pratiques.

Utilisez Vanilla JavaScript pour activer ou désactiver les boutons

Dans cette section, nous discuterons d'un exemple pratique qui montre comment activer ou désactiver un bouton en utilisant du JavaScript simple.

Jetons un coup d'œil à l'exemple ci-dessous.

<html>
    <head>
        <script>
            function toggleButton()
            {
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;

                if (username && password) {
                    document.getElementById('submitButton').disabled = false;
                } else {
                    document.getElementById('submitButton').disabled = true;
                }
            }
        </script>
    </head>
    <body>
        <div>
            <form action="/submit.php" method="post">
                Username:<input type="text" name="username" id="username" onchange="toggleButton()">
                Password:<input type="password" name="password" id="password"  onchange="toggleButton()">
                <input id="submitButton" type="submit" value="Submit" disabled/>
            </form>
        </div>
    </body>
</html>

Dans l'exemple ci-dessus, nous avons construit un formulaire très simple avec quelques champs de texte et un bouton de soumission. Il est important de noter qu'une fois le formulaire chargé, le bouton de soumission est désactivé. Nous utilisons l'attribut disabled pour définir l'état par défaut du bouton de soumission sur désactivé.

Ensuite, nous définissons l'événement onchange sur les champs de saisie du nom d'utilisateur et du mot de passe. Par conséquent, lorsque l'utilisateur modifie la valeur de ces champs, l'événement onchange est déclenché, qui appelle finalement la fonction toggleButton. Dans la fonction toggleButton, nous vérifions si l'utilisateur a saisi une valeur dans les deux champs obligatoires. Si tel est le cas, nous définissons l'attribut onchange 事件。因此，当用户更改这些字段的值时，就会触发 onchange 事件，该事件最终调用 toggleButton 函数。在 toggleButton 函数中，我们检查用户是否在两个必填字段中输入了值。如果是这种情况，我们将提交按钮的 disabled 属性设置为 false，这最终会启用提交按钮，以便用户可以单击该按钮。另一方面，如果用户名或密码字段为空，我们将 disabled 属性设置为 true du bouton de soumission sur false, ce qui active finalement le bouton de soumission afin que l'utilisateur puisse cliquer dessus. D'un autre côté, si le champ du nom d'utilisateur ou du mot de passe est vide, nous définissons l'attribut

sur true, ce qui désactivera le bouton de soumission afin que l'utilisateur ne puisse pas cliquer dessus.

Dans l'exemple ci-dessus, nous avons utilisé le bouton de soumission d'entrée, mais vous pouvez également utiliser un bouton HTML comme indiqué dans l'exemple ci-dessous.

<button id="submitButton" disabled/>Submit</button>

Voici comment activer ou désactiver les boutons en utilisant du JavaScript simple. Dans la section suivante, nous apprendrons comment utiliser la bibliothèque jQuery.

Activer ou désactiver les boutons à l'aide de jQuery

Dans cette section, nous verrons comment basculer l'état d'un bouton à l'aide de la bibliothèque jQuery.

Modifions l'exemple discuté dans la section précédente.

<html>
    <head>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script>
        function toggleButton()
        {
            var username = $('#username').val();
            var password = $('#password').val();

            if (username && password) {
                $('#submitButton').attr('disabled', false);
            } else {
                $('#submitButton').attr('disabled', true);
            }
        }
    </script>
    </head>
    <body>
        <div>
            <form action="/submit.php" method="post">
                Username:<input type="text" name="username" id="username" onchange="toggleButton()">
                Password:<input type="password" name="password" id="password"  onchange="toggleButton()">
            <input id="submitButton" type="submit" value="Submit" disabled/>
            </form>
        </div>
    </body>
</html>

attrTout d'abord, nous avons chargé la bibliothèque jQuery afin de pouvoir l'utiliser dans notre fonction. La seule différence dans l’exemple ci-dessus est que nous utilisons la méthode

de l’objet jQuery pour changer l’état du bouton.

Les méthodes attr 方法用于设置或获取元素的特定属性的值。如果仅将其与单个参数一起使用，则它将用于获取属性的值。另一方面，如果将它与两个参数一起使用，则它用于设置属性的值。在我们的例子中，我们使用它来设置按钮的 disabled de l'objet

jQuery sont utilisées pour définir ou obtenir la valeur d'une propriété spécifique d'un élément. Si vous l'utilisez avec un seul paramètre, il servira à obtenir la valeur d'une propriété. En revanche, si vous l'utilisez avec deux paramètres, il permet de définir la valeur de la propriété. Dans notre cas, nous l’utilisons pour définir la valeur de la propriété

du bouton. A part ça, tout est pareil. prop 方法而不是 attr

Si vous utilisez jQuery 1.5+, vous devez utiliser la méthode prop au lieu de la méthode

, comme indiqué dans l'extrait de code suivant. removeAttr 方法，如以下代码片段所示。其结果与将 disabled 属性设置为 false

//...
$('#submitButton').prop('disabled', true);

Alternativement, si vous souhaitez supprimer des attributs d'un élément, vous pouvez également utiliser la méthode removeAttr de l'objet jQuery, comme indiqué dans l'extrait de code suivant. Le résultat est le même que si vous définissiez l'attribut

sur false.

//...
$('#submitButton').removeAttr('disabled');

Voici les différentes manières d'activer ou de désactiver les boutons à l'aide de jQuery.

Conclusion

🎜Aujourd'hui, nous avons expliqué comment activer ou désactiver les boutons en JavaScript avec quelques exemples pratiques. En plus du JavaScript simple, nous avons également expliqué comment y parvenir à l'aide de la bibliothèque jQuery. 🎜

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 jquery html 对象事件

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：Astuce simple : analyser jQuery - GrepArticle suivant：Astuce simple : analyser jQuery - Grep

Articles Liés

Voir plus