这适用于jQuery Mobile。并非所有常规的jQuery答案都可以。
我无法在jQuery Mobile中禁用我的按钮。
jQuery Mobile说要使用
$('input').button('disable');
但是我在Firebug中收到错误消息：
未捕获异常：在初始化之前无法调用按钮上的方法;试图调用方法'禁用'。
它位于我页面的文档就绪部分，所以我不知道它是如何初始化的。
我已尝试直接通过其ID调用按钮，但这不起作用。
我试过了：
$('button').attr("disabled", "disabled");
不起作用。
我还有一个切换命令，可以根据值来启用一个按钮。我已经将它的部分路由到了正确的“case”语句，但是jQuery mobile中的启用/禁用按钮功能无效。
答案 0 :(得分：107)
更新：
由于这个问题仍然受到很多关注，我还在添加关于如何禁用该按钮的当前jQM文档：
更新的例子：
启用已启用已停用的表单按钮
$('[type="submit"]').button('enable');
停用表单按钮
$('[type="submit"]').button('disable');
刷新更新表单按钮
如果您通过操作表单按钮 JavaScript，你必须调用它上面的刷新方法来更新 视觉造型。
$('[type="submit"]').button('refresh');
以下原帖：
直播示例：http://jsfiddle.net/XRjh2/2/
更新：
使用下面的@naugtur示例：http://jsfiddle.net/XRjh2/16/
更新＃2：
链接按钮示例：
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实现同样的效果。
答案 1 :(得分：10)
未捕获的异常：无法调用 按钮之前的方法 初始化;试图打电话 方法'禁用'。
这意味着您尝试在未作为按钮处理的元素上调用它，因为没有调用.button方法。因此，您的问题必须是选择器。
您正在选择所有输入$('input')，因此它尝试从按钮小部件命名空间调用方法disable，不仅在按钮上，而且在文本输入上。
$('button').attr("disabled", "disabled");将无法与jQuery Mobile一起使用，因为您修改了hiden按钮并由jQuery Mobile生成的标记替换。
您必须使用jQueryMobile的方法来禁用带有正确选择器的按钮，如：
$('div#DT1S input[type=button]').button('disable');
答案 2 :(得分：4)
如果我正确地阅读了这个问题，你可能会错过jQuery移动“按钮”小部件与HTML按钮元素不同。我认为这归结为你无法调用$('input').button('disable')，除非你之前已经调用$('input').button();来初始化输入中的jQuery Mobile按钮小部件。
当然，你可能不想使用jQuery按钮小部件功能，在这种情况下，亚历山大的答案应该让你正确。
答案 3 :(得分：4)
似乎需要将按钮实际定义为按钮小部件。
我有同样的问题（在测试版1中）
我做了
$("#submitButton").button();
在我的窗口准备处理程序中，之后它按照文档中所说的那样工作，即：
$("#submitButton").button('disable');
我想这与jqm正在转换标记有关，但实际上并没有为按钮和链接按钮设置真正的按钮小部件。
答案 4 :(得分：3)
我创建了一个小部件，可以完全禁用或显示页面上内容的只读视图。它会禁用所有按钮，锚点，删除所有点击事件等，并可以重新启用它们。它甚至支持所有jQuery UI小部件。我为我在工作中写的应用程序创建了它。你可以自由使用它。
答案 5 :(得分：2)
尝试以下陈述之一：
$('input[type=submit]').attr('disabled','disabled');
或
$('input[type=button]').attr('disabled','disabled');
<强>更新
根据您提供的HTML，定位特定按钮：
$('div#DT1S input[type=button]').attr('disabled','disabled');
答案 6 :(得分：2)
$(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>
这个对我有用，你可能需要训练禁用 - 启用
的逻辑答案 7 :(得分：2)
根据我的发现......
当您对带有选择器的元素执行button（）并尝试在同一元素上使用不同选择器的button（）函数/方法时，会发生此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); });
所以请在启动时再次使用该类，这样才能解决问题。
答案 8 :(得分：0)
对于链接按钮，
调用.button('enable')方法只会生效，但功能上不会。
但我有一个技巧。我们可以使用HTML5 data-属性来保存/交换href和onclick的值。
请参阅：
源代码模式：
答案 9 :(得分：0)
您收到该错误可能是因为该元素尚未在DOM中。 $（文件）。就绪（）;不管用。尝试将您的代码添加到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>
希望能帮到某人
答案 10 :(得分：0)
要禁用按钮，请向其添加css类disabled。写
$("button").addClass('disabled')
答案 11 :(得分：0)
对于jQuery Mobile 1.4.5：
对于锚点按钮，CSS类为：ui-state-disabled，对于输入按钮，它足以切换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>
BTW，对于输入按钮，还有另一种方法：
启用：
$(".class").prop("disabled", false).removeClass("ui-state-disabled");
禁用：
$(".class").prop("disabled", true).addClass("ui-state-disabled");