Активировать кнопку отправки на действительной форме с помощью jQuery Mobile - PullRequest
Новая
       22

Активировать кнопку отправки на действительной форме с помощью jQuery Mobile

0 голосов
/ 27 января 2012

Я прочитал много документации о 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, но я не понимаю логику: я выключаю и включаю отправку по-разному!

Правильно ли моё решение?

Спасибо за вашу помощь.

Приветствия

V.

1 Ответ

3 голосов
/ 27 января 2012

Вы можете использовать функцию 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/

Кроме того, вы хотите уйти от использования обработчика событий document.ready при использовании jQuery Mobile. Вместо этого используйте pageinit, нацеленный на элементы data-role="page", как в моем примере выше.

...