0

我是 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");

}
4

1 回答 1

3

除非您使用真正旧版本的 jquery 来设置属性值，否则请使用prop而不是。attr

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

在此处阅读差异

您还可以考虑绑定和解除绑定事件，unbind\bind或on\ off(>=1.7)，如果您只需要它一次，您可以使用one并摆脱onclick元素中的 inline 属性。

  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
  }

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

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

更新

您的问题是您在 ajax 调用完成（ajax 是异步的）之前太早地制作按钮，您需要在 ajax 调用成功/失败或完成回调中执行此操作。

function removeConflictsOverrideReasons() {
     var $elem = $("#removeConflictsReason");
     $elem.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();
            $elem.prop("disabled", false); //<---------Do it here
        });

    } else {
        alert('Please select Issue summary to remove');
    }
}
于 2013-10-17T01:32:42.540 回答