禁用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了它。 你可以自由使用它。
尝试下面的一个陈述：
$('input[type=submit]').attr('disabled','disabled');
要么
$('input[type=button]').attr('disabled','disabled');
UPDATE
针对一个特定的button，给你提供的HTML：
$('div#DT1S input[type=button]').attr('disabled','disabled');
$(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-属性来保存/交换href和onclick值。
看到：
源代码模式：
你得到的错误可能是因为该元素不在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>
