禁用jQuery Mobile中的button

这是为jQuery Mobile。 并不是所有常规的jQuery答案都可以工作。

我无法让我的button在jQuery Mobile中禁用。

jQuery Mobile说要使用

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

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

未捕获的exception:在初始化之前不能调用button上的方法; 试图调用方法“禁用”。

它在我的页面的文档就绪部分,所以我不知道它尚未初始化。

我试着直接通过它的ID来调用button,但这是行不通的。

我试过了:

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

不起作用。

我也有一个开关命令,将启用一个button的值是什么。 我有这部分路由到右“case”语句,但启用/禁用button的东西在jQuery手机不起作用。

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

更新:

由于这个问题仍然得到很多点击,我还添加了当前的jQM Docs关于如何禁用button:

更新示例:

启用启用禁用的表单button

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

禁用禁用表单button

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

刷新更新表单button
如果您通过JavaScript操作表单button,则必须调用其刷新方法来更新视觉样式。

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

原文如下:

现场示例: http : //jsfiddle.net/XRjh2/2/

更新:

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

更新#2:

链接button示例:

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

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

未捕获的exception:在初始化之前不能调用button上的方法; 试图调用方法“禁用”。

这意味着你正试图在一个不作为button处理的元素上调用它,因为没有调用它。 因此你的问题必须是select器。

您正在select所有input$('input') ,因此它会尝试从button小部件名称空间不仅在button上而且在文本input上调用方法disable

$('button').attr("disabled", "disabled"); 将不会与jQuery Mobile一起工作,因为您修改了隐藏的button,并由jQuery Mobile生成的标记replace。

你必须使用jQueryMobile的禁用button的方法,如下所示:

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

如果我正确地阅读这个问题,你可能会错过一个jQuery移动“button”小部件是不是一个HTMLbutton元素相同的东西。 我认为这可以归结为你不能调用$('input').button('disable')除非你先前调用过$('input').button(); 在你的input上初始化一个jQuery Mobilebutton小部件。

当然,您可能不想使用jQuerybutton小部件function,在这种情况下,Alexander的答案应该是正确的。

似乎需要的是将button实际定义为button小部件。

我有同样的问题(在testing版1)

我做了

 $("#submitButton").button(); 

在我的窗口准备好处理程序之后,它按照文档中的说法工作,即:

 $("#submitButton").button('disable'); 

我想这与jqm正在转换标记,但不是真正instatiatingbutton和链接button的真正的button部件。

我创build了一个小部件,可以完全禁用或呈现页面上的内容的只读视图。 它禁用所有button,锚点,删除所有点击事件等,并可以重新启用它们。 它甚至支持所有的jQuery UI小部件。 我为我在工作中编写的应用程序创build了它。 你可以自由使用它。

查看( http://www.dougestep.com/dme/jquery-disabler-widget )。

尝试下面的一个陈述:

$('input[type=submit]').attr('disabled','disabled');

要么

$('input[type=button]').attr('disabled','disabled');

UPDATE

针对一个特定的button,给你提供的HTML:

$('div#DT1S input[type=button]').attr('disabled','disabled');

http://jsfiddle.net/kZcd8/

  $(document).ready(function () { // Set button disabled $('#save_info').button("disable"); $(".name").bind("change", function (event, ui) { var edit = $("#your_name").val(); var edit_surname = $("#your_surname").val(); console.log(edit); if (edit != ''&& edit_surname!='') { //name.addClass('hightlight'); $('#save_info').button("enable"); console.log("enable"); return false; } else { $('#save_info').button("disable"); console.log("disable"); } }); <ul data-role="listview" data-inset="true" data-split-icon="gear" data-split-theme="d"> <li> <input type="text" name="your_name" id="your_name" class="name" value="" placeholder="Frist Name" /></li> <li> <input type="text" name="your_surname" id="your_surname" class="name" value="" placeholder="Last Name" /></li> <li> <button data-icon="info" href="" data-role="submit" data-inline="true" id="save_info"> Save</button> 

这一个工作对我来说,你可能需要锻炼禁用 – 启用的逻辑

根据我的发现…

当你用一个select器在一个元素上执行button(),并尝试在同一个元素上使用一个button()的函数/方法和不同的select器时,就会发生这个Javascript错误。

例如,这里是HTML:

 <input type="submit" name="continue" id="mybuttonid" class="mybuttonclass" value="Continue" /> 

所以你对它执行button():

 jQuery(document).ready(function() { jQuery('.mybuttonclass').button(); }); 

然后你尝试禁用它,这次不是使用类来启动它,而是使用ID,那么你会得到错误,因为这个线程的标题是:

 jQuery(document).ready(function() { jQuery('#mybuttonid').button('option', 'disabled', true); }); 

所以在你开始的时候再次使用这个类,这将解决问题。

对于链接button,

调用.button('enable')方法只起作用,但function上不起作用。

但我有一个窍门。 我们可以使用HTML5 data-属性来保存/交换hrefonclick值。

看到:

http://jsbin.com/ukewu3/74/

源代码模式:

http://jsbin.com/ukewu3/74/edit

你得到的错误可能是因为该元素不在DOM内。 $(文件)。就绪(); 不pipe用。 尝试将您的代码添加到pageinit事件处理程序。

这是一个工作的例子:

 <!DOCTYPE html> <html> <head> <title>Button Disable</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div id="MyPageId" data-role="page"> <div data-role="header"> <h1>Button Disable</h1> </div> <div data-role="content"> <button id="button1" type="button" onclick="javascript:alert('#button1 clicked');">Button 1</button> <button id="button2" type="button" onclick="javascript:alert('#button2 clicked');">Button 2</button> </div> <div data-role="footer"> <p>footer</p> </div> </div> <script type="text/javascript">//<![CDATA[ $('#MyPageId').bind("pageinit", function (event, data) { $("#button1").button("disable"); }); //]]></script> </body> </html> 

希望能帮助别人

为了禁用一个button,将css类disabled 。 写

 $("button").addClass('disabled') 

对于jQuery Mobile 1.4.5:

对于锚点button,CSS类是: ui-state-disabled ,对于inputbutton,只需切换disabled属性即可。

 function toggleDisableButtons() { $("#link-1").toggleClass("ui-state-disabled", !$("#link-1").hasClass("ui-state-disabled")); $("#button-1").attr("disabled") ? $("#button-1").removeAttr("disabled") : $("#button-1").attr("disabled",""); } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> </head> <body> <div data-role="page" id="page-1"> <div role="main" class="ui-content"> <button class="ui-btn" onclick="toggleDisableButtons();">Toggle disabled</button> <a id="link-1" href="#" class="ui-btn ui-state-disabled">Anchor</a> <button id="button-1" disabled="">Button</button> </div> </div> </body> </html>