激活提交按钮有效形式与jQuery Mobile的
问题描述:
我读了很多关于jQuery Mobile的,按钮和形式的文档,但我还没有了解的一切。所以,我想要停用提交按钮,直到表单回复无效。激活提交按钮有效形式与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,但我不明白的逻辑:我关闭并打开提交不同!
是我的解决方案却是正确的?
感谢您的帮助。
干杯,
五
答
您可以使用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"
元素,就像我上面的例子。
哦,是的!非常明亮。谢谢,贾斯帕。我会打坐(并努力!)这些详细的解释。问候。 V. – Vincent 2012-01-26 23:12:23
只是一个非常小的提示:.trigger('keyup')将触发初始验证,以便在所有文本字段都有值时立即启用提交按钮。绝妙的诀窍 – 2013-01-17 10:45:07