Disable browser buttons javascript

Disable a HTML Button in JavaScript [With Examples]

To disable a button using only JavaScript you need to set the disabled property to false . For example: element.disabled = true .

And to enable a button we would do the opposite by setting the disabled JavaScript property to false .

Here a more complete example where we select the button and then we change its disabled property:

// Disabling a button using JavaScript
document.querySelector('#button').disabled = true;

// Enabling a disabled button to enable it again 
document.querySelector('#button').disabled = false;

These are the steps we have to follow:

The disabled property reflects the HTML attribute disabled and provide a way to change this property dynamically with JavaScript.

Disable button example

For demo purposes and to keep it as simple as possible we’ll be disabling the button when clicking on itself:

const button = document.querySelector('#button');

const disableButton = () =>  
button.disabled = true;
>;

button.addEventListener('click', disableButton);

Here’s the codepen so you can test it out yourself and play a bit more with it by changing the code:

If you are using jQuery, check out our article on how to disable a button using jQuery. The process is pretty similar.

References

Related articles

Источник

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

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

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

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

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

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

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

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

      
 
Username: Password:  
 
   

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

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

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

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

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

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

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

      
 
Username: Password:  
 
   

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

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

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

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

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

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

Заключение

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

Наталья Кайда автор-переводчик статьи « How to Enable or Disable a Button With JavaScript: jQuery vs. Vanilla »

Пожалуйста, оставьте свои отзывы по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, подписки, дизлайки, лайки!

Источник

JavaScript code to disable button elements

When you need to disable buttons using JavaScript, you can update the disabled attribute of elements to true .

Every HTML element has the disabled attribute which is set to false by default, even when the doesn’t have a disabled attribute present. You can test this by running the following HTML code:

Disabling multiple buttons with JavaScript

The same technique also applies when you want to disable many buttons on your HTML page. First, You need to select the buttons using the document.getElementsByTagName() method:

The getElementsByTagName() method will return a collection of Then, you need to iterate through the buttons and set the disabled attribute of each button to false . You can use the for loop to do so:

Here’s an example of HTML tag that you can run on your browser:

Disable button after click

The last thing you may want to do is to disable the after the user clicked it to prevent double clicks. You just need to wrap the disabling code in a function and pass it to the onclick attribute of your element:

The code above will disable the saveBtn once it has been clicked. Feel free to modify it to suit your requirements.

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник

How to Enable or Disable a Button With JavaScript: jQuery vs. Vanilla

Sajal Soni Last updated Jul 19, 2021

In this article, we’ll discuss how you can enable or disable a button with JavaScript. First, we’ll go through how it works in vanilla JavaScript, and later on we’ll see how to do it with jQuery.

JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing different tips and tricks that will help you in your day-to-day JavaScript development.

When you’re working with JavaScript, more often than not you need to enable or disable a button based on some actions. Usually, when you’re working with forms, you want to keep the submit button disabled until a user fills all the mandatory fields in a form. Once a user fills all the mandatory fields, you would like to automatically enable it so that the user can click on a button to submit the form.

In HTML, a button element has its own state, and thus, you can keep it either enabled or disabled. For example, when a form is loaded, you can keep a button in the disabled state. Later on, you can enable it with the help of JavaScript.

Today, we’ll discuss how you can enable or disable a button with JavaScript with a couple of real-world examples.

Enable or Disable a Button With Vanilla JavaScript

In this section, we’ll discuss a real-world example, which demonstrates how you can enable or disable a button with vanilla JavaScript.

Let’s go through the following example.

Источник