正确禁用提交按钮

时间:2009-05-24 11:12:58

标签: javascript jquery html

这是我用来禁用按钮的代码

            $("#btnSubmit").attr('disabled', 'disabled')
            $("#btnSubmit").disabled = true;

这是我的提交按钮

<input id="btnSubmit" class="grayButtonBlueText" type="submit" value="Submit" />

按钮虽然看起来已禁用,但您仍然可以单击它..这是使用FF 3.0和IE6进行测试

我在这里做错了吗?

3 个答案:

答案 0 :(得分:4)

如果它是真正的形式,即未处理javascript事件,这应该可行。

如果你正在处理带有onClick事件的按钮,你会发现它可能仍然是触发器。如果你这样做,你最好只在你的JS中设置一个变量,如buttonDisabled,并在你处理onClick事件时检查var。

否则尝试

$(yourButton).attr("disabled", "true");

如果在所有这些之后,你仍然无处可去,你可以使用jquery手动“打破”按钮(这现在变得很严重):

$(submitButton).click(function(ev) {
    ev.stopPropagation();
    ev.preventDefault();
});

这应该会使按钮停止按下按钮。

答案 1 :(得分:1)

根据表单提交的处理方式,您可能还需要删除任何点击处理程序和/或添加一个中止提交的内容。

$('#btnSubmit').unbind('click').click( function() { return false; } );

当你重新启用按钮时,你必须再次添加点击处理程序。

答案 2 :(得分:0)

您需要将Back / Prev按钮处理到浏览器中。 示例下面

1)创建form.js:

(function($) {
    $.enhanceFormsBehaviour = function() {
        $('form').enhanceBehaviour();
    }

    $.fn.enhanceBehaviour = function() {
        return this.each(function() {
            var submits = $(this).find(':submit');
            submits.click(function() {
                var hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = this.name;
                hidden.value = this.value;
                this.parentNode.insertBefore(hidden, this)
            });
            $(this).submit(function() {
                submits.attr("disabled", "disabled");
            });         
            $(window).unload(function() {
                submits.removeAttr("disabled");
            })
         }); 
    }
})(jQuery);

2)添加到您的HTML:

<script type="text/javascript">
    $(document).ready(function(){
        $('#contact_frm ).enhanceBehaviour();
    });
</script>

<form id="contact_frm" method="post" action="/contact">
   <input type="submit" value="Send" name="doSend" />
</form>

完成:)