禁用jQuery Mobile中的按钮 [英] Disable Buttons in jQuery Mobile

问题描述

这是针对jQuery Mobile的.并非所有常规jQuery答案都可以使用.

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

I can't get my buttons to disable in jQuery Mobile.

jQuery Mobile说要使用

jQuery Mobile says to use

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

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

But I get an error message in Firebug:

未捕获的异常:不能在初始化之前在按钮上调用方法；尝试将方法称为禁用".

uncaught exception: cannot call methods on button prior to initialization; attempted to call method 'disable'.

它在页面的文档准备好部分中，所以我不知道它还没有初始化.

It's in the document ready section of my page so I dont know how it's not initialized yet.

我尝试直接通过其ID调用按钮，但这不起作用.

I've tried calling the button directly by its id but that doesn't work.

我尝试过:

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

不起作用.

我还有一个switch命令，该命令将根据值启用一个按钮.我已经到了正确的"case"语句路由的那一部分，但是jQuery mobile中的启用/禁用按钮功能不起作用.

I also have a switch command that will enable one button based on what the value is. I've got that part to where its routing to right "case" statements, but the enable/disable buttons thing in jQuery mobile is not working.

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

推荐答案

更新:

由于这个问题仍然很受欢迎，因此我还要添加有关如何禁用按钮的当前jQM文档:

Since this question still gets a lot of hits I'm also adding the current jQM Docs on how to disable the button:

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

更新示例:

启用启用禁用的表单按钮

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

禁用禁用表单按钮

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

刷新更新表单按钮
如果您通过操作表单按钮 JavaScript，您必须在其上调用refresh方法来更新 视觉样式.

refresh update the form button
If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.

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

以下原始帖子:

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

更新:

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

Using @naugtur example below: 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

样式类似于按钮的链接具有与true相同的视觉选项 下面是基于表单的按钮，但有一些重要的区别. 基于链接的按钮不是按钮插件的一部分，只能使用 基本的buttonMarkup插件来生成按钮样式，因此 不支持表单按钮方法(启用，禁用，刷新). 如果您需要禁用基于链接的按钮(或任何元素)，则可以 可以将禁用类自己应用于ui-disabled JavaScript可以达到相同的效果.

Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the button plugin and only just use the underlying buttonMarkup plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.

这篇关于禁用jQuery Mobile中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！