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

Question

В моем приложении мне нужно отключить кнопку, когда она нажата, чтобы пользователь не нажимал более одного раза. Приложение - это MVC ASP.NET. Я сделал это в обычном приложении asp.net. Я пробовал ниже строки кода, но он не работает

спасибо заранее

изм Как я могу реализовать это с помощью JavaScript?

Answer 1

Я обнаружил, что в IE8 (я не уверен насчет других версий IE), что вы не можете отправить форму, если отключите кнопку в событии click.Поэтому я придумала альтернативное решение.Скройте нажатую кнопку и поместите новую отключенную кнопку на ее место.Вот код:

$().ready(function() {
  $("someButtonSelector").click(function () {
    $(this).hide();
    $(this).after('<input type="button" disabled="disabled" value="' + $(this).val() + '" />');
    return true;
  });
});

Answer 2

Вы можете попробовать это:

onclick="if (this.getAttribute('clicked') == '1') { return false; } else { this.setAttribute('clicked', '1'); }"

Это ничего не отключит, просто предотвратит событие щелчка после первого щелчка.

Answer 3

<button type="button" onclick="this.disabled = 'disabled';">Click Me!</button>

Хотя веб-элемент управления Button отображается как отправка:

<input type="submit" onclick="this.disabled = 'disabled';" value="Submit" />

Answer 4

Это будет работать:

OnClientClick="if (this.getAttribute('clicked') == '1') {
    return false; 
} else { 
    this.setAttribute('clicked', '1'); 
}"

Answer 5

var but = 1;
function f() {
    if(but == 1) {
        alert("Hello World!");
        but = 0;
    }
}

Надеюсь, это поможет.

Answer 6

Вот одна из моих кнопок, которая вызывает действие MVC, а затем отключает себя:

<button  class="btn blue pull-right" onclick="location.href='@Url.Action("Index", "GetData", new { page = Model.PageNumber + 1, sortOrder = Model.CurrentSort, fromDate = Model.FromDateParam, toDate = Model.ToDateParam, terminatingpoint = Model.TerminationPointParam, SurecallNo = Model.SurecallNoParm, CallerID = Model.CallerIDParm, outcome = Model.OutcomeParm, pagesize = Model.PageSize })';this.disabled = 'disabled'" >Next ></button>

Answer 7

Это также хорошо работает, и это легко понять:

var myButton = $('input:submit');
var waitMessage = 'wait please...';
myButton.click(function() {
    if (bottone.val() == waitMessage) {
        return false;
    };
    myButton.val(waitMessage);
    console.log('iClicked'); // this line is for testing only, it can be removed.
});

Answer 8

Я обнаружил, что если вы отключите или даже удалите кнопку или элемент ввода, он остановит обратный вызов на сервер. Самый простой способ справиться с этим - скрыть (), поскольку вы не удаляете функциональность кнопки ввода / что угодно

    $('input_selector').click(function () {
      $(this).hide(200/whatever);
      $(this).before('<p>Waiting for server to respond?!?</p><br/>')
    });

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

Answer 9

@ prakash Вы использовали jQuery, чтобы отключить или даже скрыть кнопку?

Если идентификатор вашей кнопки называется «btnClickMe», то следующий jQuery выполнит эту работу.

$("#btnClickMe").hide();

Вы также можете установить атрибут disbaled с помощью jQuery;

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

Приведенный выше не протестирован, но должен работать.