如何在onclick函数后禁用jquery中的按钮,以避免双重表单提交

时间:2013-10-17 01:30:33

标签: jquery

我是Jquery的新手。我只是想在Jquery做简单的事情。我有一个页面,我想避免多次提交。

function removeAddApply{
  $("#addAndApply").attr("disabled","disabled");
}

<input id="addAndApply" type="button" class="button" value="Add & Apply" onclick="removeAddApply()"/>

我想从页面触发onClick功能时禁用按钮。 以上是我正在做的代码。不确定有什么问题,但它不起作用。

完成功能

function removeConflictsOverrideReasons() {

      $("#removeConflictsReason").prop("disabled", true);
    if ($('.conflictsTable input:checkbox').is(":checked")) {
        var url = "/conflicts/conflictsRest/removeConflictsOverrideReasons";
        var selectedIssueSummaryIds = [];
         $('#conflictsDiv').find('.conflictsSelect:checked').each(function() {
             if($(this).val()) selectedIssueSummaryIds.push($(this).val());
         });

        $.post( url, { issueSummaryId: selectedIssueSummaryIds, userId: userId},
                function(data) {
                oReasonTable.fnReloadAjax();
                oTable.fnReloadAjax();
                clearConflictsChecked();
            });

    } else {
        alert('Please select Issue summary to remove');
    }
    $("#removeConflictsReason").removeAttr("disabled");

}

1 个答案:

答案 0 :(得分:3)

使用prop代替attr,除非您使用旧版本的jquery来设置属性值。

jQuery("#addAndApply").prop("disabled", true);

Read about the difference here

您还可以考虑绑定和取消绑定事件,unbind \ bindon \ {{{}}(&gt; = 1.7),如果您只需要一次可以使用off绑定它,并从元素中删除内联one属性。

onclick

您在函数声明中也有语法错误。它应该是

  jQuery(function(){
         jQuery('#addAndApply').on('click', function(){
            //do something  
            disableAndRemoveHandlers.call(this);   
         });
  });

  function disableAndRemoveHandlers(){
    jQuery(this).prop("disabled",true).off('click'); //Make it disable and turn off event
  }

<强>更新

你的问题是你在ajax调用完成之前过早地创建了按钮(ajax是异步),你需要在ajax调用成功/失败或完成回调中这样做。

function removeAddApply(){
  $("#addAndApply").attr("disabled","disabled");
}