Отключение кнопки после однократного нажатия

Question

Мне нужно отключить кнопку, когда она нажата, чтобы пользователь не мог щелкнуть ее более одного раза.(Мое приложение написано в MVC ASP.NET, я сделал это в обычном приложении ASP.NET.)

Я пытался использовать JavaScript и jQuery, и он не работает.Кнопка отключается, но форма не отправляется.

jQuery:

$("#ClickMe").attr("disabled", "disabled"); 

JavaScript:

function DisableNextButton(btnId) {
    document.getElementById(btnId).disabled = 'true';
}

Оба метода работают отлично, но теперь формане отправит.

Answer 1

jQuery теперь имеет функцию .one(), которая ограничивает любое данное событие (например, «отправить») одним случаем.

Пример:

$('#myForm').one('submit', function() {
    $(this).find('input[type="submit"]').attr('disabled','disabled');
});

Этот код позволит вам отправить форму один раз, а затем отключить кнопку. Измените селектор в функции find () на любую кнопку, которую вы хотите отключить.

Примечание: Согласно Франсиско Гольдштейну, я изменил селектор на форму и тип события для отправки. Это позволяет отправлять форму из любого места (кроме кнопки), но при этом отключить кнопку отправки.

Примечание 2: Для каждого журнала, использование attr('disabled','disabled') предотвратит отправку вашей формой значения кнопки отправки. Если вы хотите передать значение кнопки, используйте attr('onclick','this.style.opacity = "0.6"; return false;').

Answer 2

jQuery .one() следует использовать не с событием click, а с событием submit, как описано ниже.

 $('input[type=submit]').one('submit', function() {
     $(this).attr('disabled','disabled');
 });

Answer 3

Если при установке disabled = "disabled" сразу после того, как пользователь нажмет кнопку, и из-за этого форма не будет отправлена, вы можете попробовать две вещи:

//First choice [given myForm = your form]:
myInputButton.disabled = "disabled";
myForm.submit()

//Second choice:
setTimeout(disableFunction, 1);  
//so the form will submit and then almost instantly, the button will be disabled  

Хотя, честно говоря, могу поспорить, что будет лучший способ сделать это, чем этот.

Answer 4

$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

выберите кнопку и по ее идентификатору, тексту или классу ... она просто отключается после первого нажатия и включается через 20 миллисекунд

Работает очень хорошо для постбэков и помещает их на главную страницу, применяется ко всем кнопкам без явного вызова, как onclientClick

Answer 5

Используйте современные события Js, с «один раз»!

const button = document.getElementById(btnId);
button.addEventListener("click", function() {
    // Submit form
}, {once : true});

// Disabling works too, but this is a more standard approach for general one-time events

Документация , CanIUse

Answer 6

Для отправки формы в MVC NET Core вы можете отправить, используя INPUT :

<input type="submit" value="Add This Form">

Для создания кнопки я использую Bootstrap, например:

<input type="submit" value="Add This Form" class="btn btn-primary">

Чтобы предотвратить отправку дубликатов форм в MVC NET Core, вы можете добавить событие onclick и использовать this.disabled = true; для отключения кнопки:

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.disabled = true;">

Если вы хотите сначала проверить правильность формы, а затем отключить кнопку, сначала добавьте this.form.submit (); , поэтому, если форма действительна, эта кнопка будет отключена, в противном случае кнопка все еще будет включен, чтобы вы могли исправить свою форму при проверке.

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true;">

Вы можете добавить текст к отключенной кнопке, говоря, что вы сейчас находитесь в процессе отправки формы, когда все проверки правильны, используя this.value = 'text'; :

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true; this.value = 'Submitting the form';">

Answer 7

protected void Page_Load(object sender, EventArgs e)
    {
        // prevent user from making operation twice
        btnSave.Attributes.Add("onclick", 
                               "this.disabled=true;" + GetPostBackEventReference(btnSave).ToString() + ";");

        // ... etc. 
    }

Answer 8

Чтобы отключить кнопку отправки, вам просто нужно добавить отключенный атрибут к кнопке отправки.

$("#btnSubmit").attr("disabled", true);

Чтобы включить отключенную кнопку, установите для атрибута disabled значение false или удалите атрибут disabled.

$('#btnSubmit').attr("disabled", false);

или

$('#btnSubmit').removeAttr("disabled");

Answer 9

думаю просто

<button id="button1" onclick="Click();">ok</button>
<script>
    var buttonClick = false;
    function Click() {
        if (buttonClick) {
            return;
        }
        else {
            buttonClick = true;
            //todo
            alert("ok");
            //buttonClick = false;
        }
    }
</script>

если вы хотите запустить один раз:)