Disable the button after clicking the button once

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 ?

---

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;
  });
});

---

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.

---

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

Although the Button web control renders as a submit:

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

---

@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.

---

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.

---

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.
});

---

Here is one of my buttons that calls an MVC action then disables itself:

<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>

---

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

Hope it helps.

---

This will work:

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