Тег BUTTON, атрибут disabled

Как активировать или отключить кнопку с помощью чистого 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 »

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

Источник

How to disable button with CSS

In this blog post, we will look into “How to disable button with CSS” on a webpage & get into various ascpects relating to it.

Contents

How to disable button with CSS?

Buttons are placed on a webpage to perform some event. When the user clicks it then something happens on that page as per the coded actions by the programmer.

There are certain scenarios that we want to show the button but it will only be clickable after a certain condition is fulfilled. Example is the Login page, we want the user to enter the username & password then he can click the login button to enter within the application. When the details are not yet entered by the user then clicking the button is of no use so it can be kept disabled.

After disabling the button, it will stop performing any action & as a default style it will be grayed out. When the user clicks it, the main event will not be performed.

Disabled buttons can also be styled with the help of CSS styles. We can also change the cursor when the user hovers over the button so that the user can easily understand that the button is disabled.

Let’s walk through the code to disable button with CSS :-

HTML :-

 
I am not Disabled I am Disabled 

Result :-

background-image property specifying the image to be displayed. It futher sets the width & height of the header element.

How to style disabled button with CSS?

It is necessary to style a disabled button in a proper manner so that user can understand it is disabled. If user is unable to understand he will keep clicking the button & will think there something wrong in this website.

Usually the disabled button can be shown as grayed out with a cursor value of not allowed. Different variations of grayed color can be applied as per the preference.

The title text also helps in giving quick information to the user. Title text appears automatically when the user hovers over the button.

The style of the disabled button should be different from the style of the normal buttons. So there can be 2 different set of styles defined in CSS for normal button & disabled button.

Below code is used for styling the disabled buttons :-

CSS :-

button:disabled, button[disabled] < border: 1px solid #999999; background-color: darkgrey; color: #fff; padding: 10px; cursor: not-allowed; >.btn

HTML :-

 
I am not Disabled I am Disabled 

Result :-

How to disable hover effect when button is disabled CSS?

When the button hover effect is defined in styles then it gets applied to all the buttons. The button may be enabled or disabled the same style applies to both with no difference.

We can modify this default behavior & apply the style only to the enabled buttons on a web page. For the disabled buttons this style of hover effect will not be applied.

Changing the hover effect is necessary for disabled buttons because the users always hover the buttons before clicking it. If the hover effect for disabled button is the same as the enabled button then there will be no difference & disabled button might look like an enabled button.

The style for the disabled button is usually faint. So the hover effect can also be styled to the same pattern to maintain consistency.

Below code displays the style that can disable hover effect of button :-

CSS :-

.btn < border: 1px solid #999999; background-color: blue; color: #fff; padding: 10px; >.btn:hover:enabled < background-color: black; color: #fff; >button:disabled, button[disabled]

HTML :-

 
I am Enabled I am Disabled 

Источник

Атрибут disabled

Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передается на сервер.

Синтаксис

Значения

Значение по умолчанию

По умолчанию это значение выключено.

       
Активная кнопка Неактивная кнопка
 
  

Результат данного примера продемонстрирован на рис. 1.

Рис. 1. Вид активной и неактивной кнопки

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

JavaScript/CSS/JQuery. Как скрыть кнопку после нажатия. или удалить её.

кнопка раскрывает контент. нужно. чтобы она пропала после нажатия.

Ну, если элемент больше никогда не будет нужен на странице, удаление лучче)

function down(elem) elem.nextElementSibling.style.display = «block»;
elem.outerHTML = «»;
>

Хотя задолбаетесь добавлять и редактировать онклики в HTML. легче уж привязать клик к классу. А если и так уже подключен jQuery, тем легче.

$(‘a.socialbutton’).on(‘click’, function() $(this).next().show();
$(this).remove();
>);

P.s. remove() можно использовать и в «чистом» JS, но он не везде поддерживается

я никогда не лез в js и джейквери если вам не сложно. можно по шагам?) а то янемного не въехал. любой колхозный способ

Elepsis Eclipse Гений (61766) При клике на a.socialbutton надо открыть ul#dropdown, ага? В первом примере onclick=»down(this)» this — тут является элементом, на который кликнули. Этот элемент передаем функции в качестве аргумента. function down(elem) < elem.nextElementSibling.style.display = "block"; elem.outerHTML = ""; >Когда эта функция запускается, переменная elem получает тот this (т. е. кнопку) и дальше делает с ним что-то. Показать нужно элемент, который в HTML находится сразу после кнопки. а это его .nextElementSibling — буквально переводится как «Следующий Элемент» elem.nextElementSibling — вот это вместе уже будет указывать на нужный ul. ему и даем style.display = «block». можно и .style.display = «inline-block»;

Проще не удалять, а скрывать

Источник