Как активировать или отключить кнопку с помощью чистого JavaScript и jQuery

2023-03-09 0 ∞

В этой статье мы обсудим способы включения и отключения кнопки. Сначала мы рассмотрим, как это делается с помощью простого JavaScript, а затем разберемся, как данный процесс выглядит в случае использования jQuery.

JavaScript – один из самых популярных языков программирования, применяемых в веб-разработке. Он используется на большинстве сайтов, и все современные браузеры поддерживают его по умолчанию. В этом руководстве мы рассмотрим полезные приемы, которые помогут вам освоить разработку на JavaScript.

К примеру, при создании сайта на основе JavaScript очень часто требуется включать или отключать кнопки в зависимости от каких-то событий. Как правило, подобная необходимость возникает при разработке форм и анкет: кнопка отправки данных должна оставаться неактивной, пока пользователь не заполнит все обязательные поля. После того, как необходимая информация будет введена, кнопка должна стать активной, чтобы пользователь мог нажать на нее и отправить данные на сервер.

В HTML для кнопок предусмотрено собственное состояние, и таким образом, вы можете активировать или отключать кнопки по желанию. К примеру, во время загрузки формы на странице можно деактивировать кнопку, а затем включить ее с помощью JavaScript.

Сейчас на конкретных примерах мы рассмотрим, как можно включать и отключать кнопки с помощью JavaScript.

Включение и отключение кнопки на чистом JavaScript
Активация и отключение кнопок на jQuery
Заключение

Включение и отключение кнопки на чистом JavaScript

В этом разделе мы разберем пример кода на чистом JavaScript, который активирует и отключает кнопку. Посмотрите на приведенный ниже фрагмент кода:

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

Данный код создает простейшую форму с двумя полями для ввода текста и кнопкой для отправки введенных данных на сервер. Важно отметить, что во время загрузки страницы кнопка формы находится в отключенном состоянии – для этого в коде по умолчанию используется свойство disabled.

После загрузки формы в коде предусмотрено событие onchange, связанное с изменением состояния текстовых полей для ввода имени и пароля пользователя. Как только пользователь введет какие-либо данные в любое из этих полей, событие onchange сработает, и вызовет функцию включения и отключения кнопки toggleButton.

Функция toggleButton проверяет, ввел ли пользователь данные в оба обязательных поля. Если пользователь ввел имя и пароль, функция изменит состояние disabled на false, что в итоге приведет к активации кнопки отправки введенных данных. Если же одно из обязательных полей осталось незаполненным, свойство disabled получает параметр true, и как следствие этого, кнопка остается неактивной.

В приведенном выше примере для создания кнопки используется элемент <input>, но при желании также можно использовать HTML-кнопку <button>, как показано ниже:

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

Вот так и выглядит активация и отключение кнопки на чистом JavaScript. В следующем разделе мы рассмотрим, как включать и отключать кнопки при работе с библиотекой jQuery.

Активация и отключение кнопок на jQuery

Теперь разберемся, как реализовать включение и деактивацию кнопок при помощи библиотеки jQuery. Для этого обратимся к примеру кода из предыдущего раздела. Далее показано как выглядит код при использовании jQuery:

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

Прежде всего, данный код загружает библиотеку jQuery, чтобы мы могли воспользоваться ее средствами для реализации нашей функции. Для изменения состояния кнопки в данном случае используется метод jQuery-объекта, attr.

Метод attr используется в jQuery для установления и получения значений определенных атрибутов элемента. Если передать методу один аргумент, он вернет значение атрибута объекта. При использовании двух аргументов метод установит новое значение атрибута. В нашем случае метод используется для задания значения disabled атрибуту кнопки. Весь остальной код остается без изменений.

Если вы работаете с jQuery 1.5+, вместо метода attr следует использовать prop, как показано во фрагменте кода, приведенном ниже:

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

Если же вам потребуется удалить какой-то из атрибутов элемента, можно воспользоваться методом removeAttr. Результат будет таким же, что и при использовании параметра false для свойства disabled:

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

Заключение

В этом руководстве на двух конкретных примерах мы рассмотрели различные способы активации и отключения кнопки – с помощью чистого JavaScript, и с использованием библиотеки jQuery.