使用 Jquery 在第一次单击时禁用提交按钮

Posted 2023-05-08

【中文标题】使用 Jquery 在第一次单击时禁用提交按钮

【英文标题】：Disable submit button on first click with Jquery

【发布时间】：2014-08-30 01:52:32

【问题描述】：

我目前有一个附加到提交按钮的灯箱弹出窗口，该按钮仅在第一次单击提交按钮时显示。基本上在有人提交表单之前，我们希望他们在点击提交按钮时看到这个弹出窗口。这一切都很好，但现在我需要在第一次点击时到达表单不提交/处理的位置。但是，在第一次单击之后，需要将提交按钮启用到他们可以提交表单的位置。

知道如何将以下代码更改为仅在第一次单击提交按钮时提交按钮不处理表单的位置吗？

   <script type="text/javascript">
    $('#Submitbutton').one("click",function(e) 

    $('#lp').lightbox_me(
    centered: true,
    overlayCSS:background: '#481d33', opacity: .45,
    overlaySpeed:0,
    lightboxSpeed:0
    );

    );
    </script>

【问题讨论】：

你能展示更多的示例代码吗？或表达详细信息。

【参考方案1】：

var hasClicked = false;
$('#Submitbutton').on('click',function(e) 
    if (hasClicked === true) 
        //submit form here
     else 
        e.preventDefault();
        hasClicked = true;
        $('#lp').lightbox_me(
            centered: true,
            overlayCSS:background: '#481d33', opacity: .45,
            overlaySpeed:0,
            lightboxSpeed:0
        );
    
);

在第一次提交时设置一个变量，然后在第二次提交时由于该变量而有所不同。

编辑：一致的引号和代码清理。

【讨论】：

您的代码将无法正常工作，因为您只听了一次点击。

谢谢，我忘了那个，只是把它改成了on :D

这是最佳答案。它使用 bool（内存占用小），覆盖了您的灯箱代码，而且速度很快。我唯一要改进的是，如果您使用表单元素绑定来提交表单，而不是单击提交。

【参考方案2】：

将 .on() 从 .one() 更改为。你可以声明一个变量来跟踪按钮是否被点击。

var isAlreadytClicked = false;
$('#Submitbutton').on("click", function (e) 
    if (isAlreadytClicked == false) 
        isAlreadytClicked = true;
        return;
    

    if (isAlreadytClicked) 
        //Do whatever you want on subsequent click

    
);

【参考方案3】：

添加一行

$('#SubmitBtn').attr('disabled',false);

在 if 块内。

【参考方案4】：

您可以使用计数器来确定点击次数：

 var count = 0;
 $('#Submitbutton').click(function(e) 
 count++;
 if(count==1)
 return;//return if clicked first time
 $('#lp').lightbox_me(centered: true,overlayCSS:background: '#481d33', opacity: .45,overlaySpeed:0,lightboxSpeed:0);
 );

【参考方案5】：

<input type="button"  id="SubmitBtn" value="Submit" onclick="return submitData();" disabled="disabled" >

在脚本中

//create a global variable for clicked or not
var submitBtnClicked = false;

function submitData()

 if(submitBtnClicked )
 
   $('#SubmitBtn').attr('disabled',false);
   submitBtnClicked =true;
     

【参考方案6】：

只需返回 false 即可。 或者 e.perventDefault() 可能有助于事件冒泡。

  $('#Submitbutton').one("click",function(e) 

     $('#lp').lightbox_me(
     centered: true,
     overlayCSS:background: '#481d33', opacity: .45,
     overlaySpeed:0,
     lightboxSpeed:0
     );
    e.perventDefault();
     return false;
  );

【讨论】：

.one() 应该运行一次函数