Как отключить href после одного клика с помощью JQuery


Как отключить href после одного клика с помощью JQuery

26.10.2020 04:05:37 Просмотров 61 Источник

Я работаю над проектом в Laravel-5.8,

Когда пользователь нажимает на ссылку href он публикует всех респондентов:

Контроллер:

public function submit_all_respondents(){
     ...
  Notification::route('mail', $details['employee_respondent_email'])
                                ->notify(new \App\Notifications\RespondentSubmit($details));
  Session::flash('success', 'Email sent to respondents successfully');
  return redirect()->back();
}  

Смотреть

<a href ="{{ route('post.respondent.all')}}" class="btn btn-primary float-left"><i class="fas fa-arrow-right"></i> Post All Respondents</a>   

После всего лишь одного щелчка мыши я хочу, чтобы href был отключен и стал "Processng...", пока это не будет сделано.

Как мне этого добиться

У вопроса есть решение - Посмотреть?

Ответы - Как отключить href после одного клика с помощью JQuery / How to disable an href after one click using JQuery

Является ответом!
Bazaim

26.10.2020 04:10:04

Простое решение :

$(...).click(function(e) {
    if ($(this).is(':disabled')) {
        e.preventDefault();
    }

    $(this).prop('disabled', true)
        .html('<i class="fas fa-arrow-right"></i> Processng ...');
});
Derek.W

26.10.2020 04:10:41

Вы можете отключить href с помощью CSS. Если вы добавите CSS-стиль pointer-events: none;, этот селектор не будет принимать никаких событий указателя. (Так же как и disabled.)

Поэтому хорошо создать новый класс под названием .processing и добавить его в селектор, когда пользователь нажимает на него.

function processing(event) {
  event.target.className += " processing";
}
.processing {
  pointer-events: none;
  opacity: 0.5;
}
<a href ="#" class="btn btn-primary float-left" onclick="processing(event)"><i class="fas fa-arrow-right"></i> Post All Respondents</a>

Помочь в развитии проекта:
Закрыть X