Question

我使用this code (from SO)禁用asp.net Web窗体按钮以在单击时禁用按钮

$(document).ready(function () {
    $('[id$=btnSave]').click(function () {
        var button = this;

        setTimeout(function () {
            $(button).attr('disabled', 'disabled');
        }, 100);
    });
});

但是当我添加jQuery validation＆amp; JQuery Validation Groups for WebForms个插件页面，

$(document).ready(function () {
    $("#form1").validateWebForm({
        rules: {
            myDate: {
                customDate: true
            },
            nic: {
                nicNo: true
            }
        }
    });
...
<asp:TextBox ID="txtName" runat="server" CssClass="required" ></asp:TextBox>

即使输入无效，它也会禁用该按钮。如果输入无效，如何避免禁用该按钮？

Answer 1

在禁用按钮并提交之前，请尝试使用plugin's built-in .valid() method来测试表单。根据评论，我意识到你正在用另一个插件初始化jQuery Validate插件，但下面的核心概念应该是一样的。

DEMO：http://jsfiddle.net/7HzZF/

<强>的jQuery ：

$(document).ready(function() {

    $('#myform').validate({
        // rules & options
    });

    $('#button').on('click', function (e) {
        e.preventDefault();
        if ($('#myform').valid()) {
            $('#myform').submit();
            $(this).attr('disabled', 'disabled');
        }
    });

});

<强> HTML ：

<form id="myform">
    ....
    <input id="button" type="submit" />
</form>

或者，如果您的其他插件允许您使用submitHandler回调函数，我强烈建议您使用它。

http://jsfiddle.net/h34bJ/

它仅在有效的表单上触发，它确实清除了大量冗余和多余的事件处理。

$(document).ready(function () {

    $('#myform').validateWebForm({
        // your rules,
        submitHandler: function (form) {
            $('#button').attr('disabled', 'disabled');
        }
    });

});

当输入无效时，阻止按钮禁用jQuery验证

1 个答案: