When AJAX (jQuery) is used for asynchronous data request, to prevent users from repeatedly clicking the button for some reason, we need to disable the request submission button.
Key Points: The attr and removeAttr functions of jQuery are mainly the disabled attribute of the element button.
Demo:
Copy codeThe Code is as follows:
<Body>
<A class = "disabled"> Button disabeld </a> <a class = "abled"> Button abled </a> <br/>
<Input type = "button" id = "submit" name = "submit" value = "submit">
</Body>
<Script type = "text/javascript" src = "../jquery-1.2.6.js"> </script>
<Script type = "text/javascript">
$ (Function (){
// Invalidate it
$ (". Disabled"). click (function (){
$ ("# Submit"). attr ("disabled", "disabled ");
$ ("# Submit"). val ('Disabled ...');
});
// Activate
$ (". Abled"). click (function (){
$ ("# Submit"). removeAttr ("disabled ");
$ ("# Submit"). val ('submit ');
});
// Operation Request
$ ("# Submit"). click (function (){
$ ("# Submit"). attr ("disabled", "disabled ");
Alert ("hi"); // send ajax request
$ ("# Submit"). removeAttr ("disabled ");
});
});
</Script>
Description: After you click "Button disabeld", use $ ("# submit "). the attr ("disabled", "disabled") Statement disables the test Button. In essence, it adds a disabled attribute to the test Button and then clicks "Button abled" or executes an ajax () request, when the request is complete, use $ ("# submit "). removeAttr ("disabled"); Removes the "Disable" button attribute to enable the "Disable" button to avoid repeated requests.