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

查看:14
本文介绍了禁用 jQuery Mobile 中的按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是针对 jQuery Mobile 的.并非所有常规的 jQuery 答案都有效.

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

jQuery Mobile 说要使用

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

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

<块引用>

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

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

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

我试过了:

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

不起作用.

我还有一个开关命令,可以根据值启用一个按钮.我已经知道它路由到正确的case"语句的部分,但是 jQuery mobile 中的启用/禁用按钮不起作用.

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

解决方案

更新:

由于这个问题仍然有很多点击率,我还添加了有关如何禁用按钮的当前 jQM 文档:

更新示例:

<块引用>

启用禁用表单按钮

$('[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:

链接按钮示例:

JS

var clicked = false;$('#myButton').click(function() {如果(点击 === 假){$(this).addClass('ui-disabled');点击=真;alert('按钮现在被禁用');}});$('#enableButton').click(function() {$('#myButton').removeClass('ui-disabled');点击=假;});

HTML

<div data-role="内容"><a href="#" data-role="button" id="myButton">点击按钮</a><a href="#" data-role="button" id="enableButton">启用按钮</a>

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

<块引用>

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

This is for jQuery Mobile. Not all regular jQuery answers will work.

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

jQuery Mobile says to use

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

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.

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

I've tried:

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

Doesn't work.

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.

code: http://pastebin.com/HGSbpAHQ

解决方案

UPDATE:

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

Updated Examples:

enable enable a disabled form button

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

disable disable a form button

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

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');

Original Post Below:

Live Example: http://jsfiddle.net/XRjh2/2/

UPDATE:

Using @naugtur example below: http://jsfiddle.net/XRjh2/16/

UPDATE #2:

Link button example:

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>

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

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆