单击按钮一次后禁用该按钮

Question

In my application i need to disable the button once it is clicked so that user should not click more than once. APplication is MVC ASP.NET i have done this in normal asp.net application. I tried below lines of code but its not working

thanks in Advance

edited How can i implement this using javascript ?

Answer 1

I've found that with IE8 (I'm not sure about other versions of IE) that you cannot submit a form if you disable the button on the click event. So I came up with an alternate solution. Hide the clicked button and put a new disabled button in it's place. Here's the code:

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

Answer 2

You can try this:

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

It will not disable anything, just prevent the click event after being first clicked.

Answer 3

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

虽然Button Web控件呈现为提交：

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

Answer 4

i have found that if you disable or even remove the button or input element it will stop the call back to the server the most simplest way to handle this is a hide() because you are not removing the functionality of the input button/whatever

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

since it is a hide the br is to make sure the p tag is on top of it. there may be a better way and i am open to suggestions.

Answer 5

This works fine as well, and it's easy to understand:

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 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 but = 1;
function f() {
    if(but == 1) {
        alert("Hello World!");
        but = 0;
    }
}

Hope it helps.

Answer 8

This will work:

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

Answer 9

@prakash have you used jQuery to disable or even hide the button?

If your button's id is say "btnClickMe" then the following jQuery will do the job.

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

You could also set the disbaled attribute using jQuery;

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

The one above is untested but should work.