使用jQuery Mobile激活有效表单上的提交按钮

时间:2012-01-26 22:15:32

标签: jquery forms jquery-mobile submit form-submit

我阅读了很多关于jQuery Mobile,按钮和表单的文档,但我并没有理解所有内容。因此,我想停用提交按钮,直到表单回复无效。

这是我的工作代码......

$(document).ready(function() 
{
    /* $('#submit').button('enable') */ /* Console says "Uncaught TypeError: Object [object Object] has no method 'button'" */
    $('#submit').attr("disabled", true);
    /* Do stuff */
    $('#form').live('keyup change', function()
    {
    if (isEmailValid && isTextValid)
    {
        /* $('#submit').attr("disabled", false); */ /* Button is not enable */
        $('#submit').button('enable');
    }
    });
})
...
<div class="content-primary">
    <form id="form">
    <button data-theme="a" id="submit" type="submit">Submit</button>
    </form>
</div>

我的代码在Chrome,Firefox和Internet Explorer中运行,但我不明白逻辑:我关闭并启用提交方式不同!

我的解决方案是否正确?

感谢您的帮助。

干杯,

1 个答案:

答案 0 :(得分:3)

您可以使用jQuery Mobile button()函数启用和禁用提交按钮小部件:

$(document).delegate('[data-role="page"]', 'pageinit', function () {
    var $submit = $(this).find('#submit'),
        $text   = $(this).find('input[type="text"]');
    $text.bind('keyup', function () {
        if (this.value == '') {
            $submit.button('disable');
        } else {
            $submit.button('enable');
        }
    }).trigger('keyup');
});

以下是演示:http://jsfiddle.net/tewV6/

此外,在使用jQuery Mobile时,您希望避免使用document.ready事件处理程序。而是使用针对pageinit元素的data-role="page",如上例所示。