在jQuery Mobile中禁用按钮

Question

这是针对jQuery Mobile的.并非所有常规jQuery答案都能正常运行.

我无法在jQuery Mobile中禁用我的按钮.

jQuery Mobile说要使用

$('input').button('disable');   

但是我在Firebug中收到一条错误消息:

未捕获的异常:在初始化之前无法调用按钮上的方法; 试图调用方法'禁用'.

它位于我页面的文档就绪部分,所以我不知道它是如何初始化的.

我试过直接通过它的id调用按钮,但这不起作用.

我试过了:

$('button').attr("disabled", "disabled");

不行.

我还有一个switch命令,它将根据值的大小启用一个按钮.我有那个部分到它的路由到正确的"case"语句,但jQuery mobile中的启用/禁用按钮的东西不起作用.

代码:http://pastebin.com/HGSbpAHQ

Answer 1

更新:

由于这个问题仍然受到很多关注,我还在添加关于如何禁用按钮的当前jQM文档:

• http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-methods.html

更新的例子:

启用启用已禁用的表单按钮

$('[type="submit"]').button('enable');  

禁用禁用表单按钮

$('[type="submit"]').button('disable'); 

刷新更新表单按钮
如果通过JavaScript操作表单按钮,则必须在其上调用refresh方法以更新可视样式.

$('[type="submit"]').button('refresh');

以下原帖:

实例:http://jsfiddle.net/XRjh2/2/

更新:

使用下面的@naugtur示例:http://jsfiddle.net/XRjh2/16/

更新#2:

链接按钮示例:

• http://jsfiddle.net/gRLYQ/6/

JS

var clicked = false;

$('#myButton').click(function() {
    if(clicked === false) {
        $(this).addClass('ui-disabled');
        clicked = true;
        alert('Button is now disabled');
    } 
});

$('#enableButton').click(function() {
    $('#myButton').removeClass('ui-disabled');
    clicked = false; 
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <a href="#" data-role="button" id="myButton">Click button</a>
        <a href="#" data-role="button" id="enableButton">Enable button</a>

    </div>
</div>

注意: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html

像按钮一样的链接具有与下面真正的基于表单的按钮相同的可视选项,但是有一些重要的区别.基于链接的按钮不是按钮插件的一部分,只是使用底层的buttonMarkup插件生成按钮样式,因此不支持表单按钮方法(启用,禁用,刷新).如果您需要禁用基于链接的按钮(或任何元素),则可以使用JavaScript自行应用已禁用的ui-disabled类来实现相同的效果.

Answer 2

未捕获的异常:在初始化之前无法调用按钮上的方法; 试图调用方法'禁用'.

这意味着您试图在未作为按钮处理的元素上调用它,因为没有.button调用任何方法.因此你的问题必须是选择器.

您正在选择所有输入$('input'),因此它尝试disable从按钮小部件命名空间调用方法,不仅在按钮上,而且在文本输入上.

$('button').attr("disabled", "disabled"); 不能与jQuery Mobile一起使用,因为你修改了hiden的按钮,并被jQuery Mobile生成的标记取代.

您必须使用禁用按钮的jQueryMobile的方法有一个正确的选择,如:

$('div#DT1S input[type=button]').button('disable');