jQuery - Как включить/выключить кнопку отправки?

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

Для нетерпеливых можно использовать функцию prop(), совместимую с версиями ниже jQuery 1.6:

$('.button').prop('disabled', true); отключить
$('.button').prop('disabled', false); Чтобы включитьДругим, кто хочет узнать больше и увидеть другие функции отключения и активации кнопки, я приглашаю вас прочитать дальше.

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

Если вы создали HTML-форму, особенно с помощью jQuery и Ajax, вам нужно будет отключить кнопку отправки во время загрузки страницы при нажатии кнопки.  Потому что вы не хотите, чтобы пользователь нажимал одну и ту же кнопку во второй раз, так как это может привести к ошибкам. Итак, чтобы этого не произошло, нам нужно отключить кнопку отправки.

Решение состоит в том, чтобы отключить кнопку отправки после того, как пользователь нажмет на нее, и отобразить загрузку или сообщение, чтобы показать пользователю, что обработка продолжается.
Отключить кнопку отправки
Чтобы отключить кнопку отправки с помощью jQuery,  Нужно отключить атрибут кнопки Submit.

$('input:submit').click(function(){
 $('input:submit').attr("disabled", true); 
}); 
Enable submit button
Чтобы включить кнопку отключения, измените значение атрибута "disabled" на false или удалите атрибут "disabled".

$('input:submit').attr("disabled",  ложь); 
или
('input:submit').removeAttr("disabled"); 
Функции attr() и removeAttr() играют ту же роль, что и функция prop(), за исключением того, что они интегрированы в jQuery начиная с версии 1.6.
Example  
Мы создадим простую HTML-форму, содержащую входные данные и кнопку. Эта форма является контактной, и пользователь должен указать свое имя, фамилию, адрес электронной почты и сообщение. Идея состоит в том, чтобы не позволять пользователю нажимать кнопку «отправить» дважды.

 
< голова> 
 
< script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> 

< Стиль> 
input,textarea{
 margin-bottom:10px; 
}
 <бр /> 

< тела> 
< форма action="" id="форма" method="POST"> 
Имя: 
< input id="имя" name="имя" type="текст" /> 
Имя: 
< input id="имя" name="имя" type="текст" /> 
Email: 
< input id="email" name="email" type="text" /> 
Сообщение: 
< textarea cols="50" id="сообщение" name="сообщение" row="5"> 

< input id="btn_envoyer" type="submit" value="Отправить" /> 
 
< сценарий> 
 $(function() 
 {
 $('#btn_envoyer').click(function()
 {
 $(this).attr("disabled", "disabled"); 
 }); 
 }); 
 
 

 
Если мы протестируем этот код в веб-браузере, то получим следующий результат:

включить и выключить кнопку отправки
После нажатия кнопка "Отправить" была отключена.

References:
Как отключить/включить элемент формы?
jQuery отключить/включить кнопку отправки