jQuery简单修改，以便在单击图像时禁用单击图像

Question

jQuery simple modification to disable clicking

The following jQuery make use of an image submit button of a the JqPostForm form to post.

How to change the image from image1.png to image3.png when clicked and disable further clicking ? and how to remove the Thank you message after 2 sec ?

There is no need of keeping the form.

<script>
$(function(){
    $("#JqPostForm").submit(function(e){
       e.preventDefault();   

        $.post("add.php",
        function(data){

                $("#message_post").html("Thank you");

        });
    });

$('#submit').hover(
            function(){ // Change the input image's source when we "roll on"
                $(this).attr({ src : 'image2.png'});
            },
            function(){ // Change the input image's source back to the default on "roll off"
                $(this).attr({ src : 'image1.png'});             }
        );

});
</script>

<form id="JqPostForm">

<input type="image" name="submit" id="submit" src="image1.png">

</form>
<div id="message_post"></div>

Answer 1

1. Use $(this).unbind('click').attr('disabled', 'disabled'); on the submit button to disable it.

2. Use setTimeout(function () { $("#message_post").hide(); }, 2000); to hide the message after 2 seconds.

    <script> $(function(){ $("#JqPostForm").submit(function(e){ e.preventDefault(); $.post("add.php", function(data){ $("#message_post").html("Thank you"); setTimeout(function () { $("#message_post").hide(); }, 2000); }); }); $('#submit').hover( function(){ // Change the input image's source when we "roll on" $(this).attr({ src : 'image2.png'}); }, function(){ // Change the input image's source back to the default on "roll off" $(this).attr({ src : 'image1.png'}).unbind('click').attr('disabled', 'disabled'); } ); }); </script> <form id="JqPostForm"> <input type="image" name="submit" id="submit" src="image1.png"> </form> <div id="message_post"></div> 

Answer 2

I'm assuming you still want it to act like a submit button. I would bind a click handler, then change the image and disable the input and unbind the handler:

$('#submit').click(function(e){ 
    $(e.target).unbind('click').attr('src','image3.png').attr('disabled', true);
});

---

I missed the part about removing the thank you message... You just need to add a timeout to your $.post callback, like:

$.post("add.php",
    function(data){
        $("#message_post").html("Thank you");
        setTimeout("$('#mesage_post').html('');", 5000);
    });

Answer 3

i took just the part of submitting form:

$("#JqPostForm").submit(function(e){
   e.preventDefault();   

    $.post("add.php",
    function(data){
            $("#submit").attr('src','image3.png');
            $("#submit").attr('disabled',true);
            $("#submit").unbind('click');
            $("#message_post").html("Thank you");

    });
});

Answer 4

You can always use the jquery .one()

http://api.jquery.com/one/