jQuery的简单修改，禁用点击图像，当它被点击一次

jQuery simple modification to disable click on image when it was clicked once

本文关键字：一次 简单 图像 jQuery 修改      更新时间：2023-09-26

jQuery简单修改，禁止点击

下面的jQuery使用JqPostForm表单的图像提交按钮来发布。

如何改变图像从image1.png到image3.png时点击和禁用进一步点击?如何在2秒后删除感谢信息?

没有必要保留这个表格。

<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>
  1. 在提交按钮上使用$(this).unbind('click').attr('disabled', 'disabled');来禁用它。

  2. 使用setTimeout(function () { $("#message_post").hide(); }, 2000);在2秒后隐藏消息

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

我只做了提交表单的一部分:

$("#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");
    });
});

我假设您仍然希望它像提交按钮一样运行。我将绑定一个点击处理程序，然后更改图像并禁用输入并取消绑定处理程序:

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

我错过了关于删除感谢信息的部分…您只需要在$中添加一个超时。Post回调，如:

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

你可以使用jquery .one()

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

相关文章：