禁用 jQuery Mobile 中的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5875025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable Buttons in jQuery Mobile
提问by swg1cor14
This is for jQuery Mobile. Not all regular jQuery answers will work.
这是针对 jQuery Mobile 的。并非所有常规的 jQuery 答案都有效。
I can't get my buttons to disable in jQuery Mobile.
我无法在 jQuery Mobile 中禁用我的按钮。
jQuery Mobile says to use
jQuery Mobile 说要使用
$('input').button('disable');
But I get an error message in Firebug:
但是我在 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.
我试过直接通过它的 id 调用按钮，但这不起作用。
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.
我还有一个开关命令，它将根据值启用一个按钮。我已经知道它路由到正确的“case”语句的位置，但是 jQuery mobile 中的启用/禁用按钮不起作用。
回答by Phill Pafford
UPDATE:
更新：
Since this question still gets a lot of hits I'm also adding the current jQM Docs on how to disable the button:
由于这个问题仍然有很多点击率，我还添加了有关如何禁用按钮的当前 jQM 文档：
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.
refresh 更新表单按钮
如果您通过 JavaScript 操作表单按钮，则必须对其调用 refresh 方法以更新视觉样式。
$('[type="submit"]').button('refresh');
Original Post Below:
原帖如下：
Live Example: http://jsfiddle.net/XRjh2/2/
现场示例：http: //jsfiddle.net/XRjh2/2/
UPDATE:
更新：
Using @naugtur example below: http://jsfiddle.net/XRjh2/16/
使用下面的@naugtur 示例：http: //jsfiddle.net/XRjh2/16/
UPDATE #2:
更新#2：
Link button example:
链接按钮示例：
JS
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
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
注意： - 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.
样式为按钮的链接与下面的基于表单的按钮具有所有相同的视觉选项，但有一些重要的区别。基于链接的按钮不是按钮插件的一部分，只是使用底层的 buttonMarkup 插件来生成按钮样式，因此不支持表单按钮方法（启用、禁用、刷新）。如果您需要禁用基于链接的按钮（或任何元素），可以使用 JavaScript 自己应用 disabled 类 ui-disabled 以达到相同的效果。
回答by naugtur
uncaught exception: cannot call methods on button prior to initialization; attempted to call method 'disable'.
未捕获的异常：无法在初始化之前调用按钮上的方法；试图调用方法“禁用”。
this means that you are trying to call it on an element that is not handled as a button, because no .buttonmethod was called on it. Therefore your problem MUST be the selector.
这意味着您试图在未作为按钮处理的元素上调用它，因为没有.button在其上调用任何方法。因此，您的问题必须是选择器。
You are selecting all inputs $('input'), so it tries to call the method disablefrom button widget namespace not only on buttons, but on text inputs too.
您正在选择所有输入$('input')，因此它尝试disable从按钮小部件命名空间调用该方法，不仅在按钮上，而且在文本输入上。
$('button').attr("disabled", "disabled");will not work with jQuery Mobile, because you modify the button that is hiden and replaced by a markup that jQuery Mobile generates.
$('button').attr("disabled", "disabled");将不适用于 jQuery Mobile，因为您修改了隐藏并由 jQuery Mobile 生成的标记替换的按钮。
You HAVE TOuse jQueryMobile's method of disabling the button with a correct selectorlike:
您必须使用禁用按钮的jQueryMobile的方法有一个正确的选择，如：
$('div#DT1S input[type=button]').button('disable');
回答by J?rgen Lindell
What seems to be needed is to actually define the button as a button widget.
似乎需要的是将按钮实际定义为按钮小部件。
I had the same problem (in beta 1)
我遇到了同样的问题（在 beta 1 中）
I did
我做了
$("#submitButton").button();
in my window ready handler, after that it worked to do as it is said in the docs, i.e.:
在我的窗口就绪处理程序中，之后它按照文档中的说明工作，即：
$("#submitButton").button('disable');
I guess this has to do with that jqm is converting the markup, but isnt actually instatiating a real button widget for buttons and link buttons.
我想这与 jqm 正在转换标记有关，但实际上并没有为按钮和链接按钮设置一个真正的按钮小部件。
回答by RwwL
If I'm reading this question correctly, you may be missing that a jQuery mobile "button" widget is not the same thing as an HTML button element. I think this boils down to you can't call $('input').button('disable')unless you have previously called $('input').button();to initialize a jQuery Mobile button widget on your input.
如果我正确地阅读了这个问题，您可能会忽略 jQuery 移动“按钮”小部件与 HTML 按钮元素不同。我认为这归结为您无法调用，$('input').button('disable')除非您之前已调用 $('input').button();以在您的输入上初始化 jQuery Mobile 按钮小部件。
Of course, you may not want to be using jQuery button widget functionality, in which case Alexander's answer should set you right.
当然，您可能不想使用 jQuery 按钮小部件功能，在这种情况下，Alexander 的回答应该会让您正确。
回答by dgestep
I created a widget that can completely disable or present a read-only view of the content on your page. It disables all buttons, anchors, removes all click events, etc., and can re-enable them all back again. It even supports all jQuery UI widgets as well. I created it for an application I wrote at work. You're free to use it.
我创建了一个小部件，它可以完全禁用或呈现页面内容的只读视图。它禁用所有按钮、锚点、删除所有点击事件等，并且可以重新启用它们。它甚至还支持所有 jQuery UI 小部件。我为我在工作中编写的应用程序创建了它。你可以随意使用它。
Check it out at ( http://www.dougestep.com/dme/jquery-disabler-widget).
回答by tribulant
Based on my findings...
根据我的发现...
This Javascript error occurs when you execute button() on an element with a selector and try to use a function/method of button() with a different selector on the same element.
当您在具有选择器的元素上执行 button() 并尝试在同一元素上使用具有不同选择器的 button() 的函数/方法时，会发生此 Javascript 错误。
For example, here is the HTML:
例如，这里是 HTML：
<input type="submit" name="continue" id="mybuttonid" class="mybuttonclass" value="Continue" />
So you execute button() on it:
所以你在它上面执行 button() ：
jQuery(document).ready(function() { jQuery('.mybuttonclass').button(); });
Then you try to disable it, this time not using the class as you initiated it but rather using the ID, then you'll get the error as this thread is titled:
然后您尝试禁用它，这次不使用您启动它的类，而是使用 ID，然后您将收到错误，因为该线程的标题是：
jQuery(document).ready(function() { jQuery('#mybuttonid').button('option', 'disabled', true); });
So rather use the class again as you initiated it, that'll resolve the problem.
因此，不如在您启动它时再次使用该类，这将解决问题。
回答by Yene Mulatu
$(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>
This one work for me you might need to workout the logic, of disable -enable
这对我有用，您可能需要锻炼 disable -enable 的逻辑
回答by xandercoded
Try one of the statements below:
尝试以下语句之一：
$('input[type=submit]').attr('disabled','disabled');
$('input[type=submit]').attr('disabled','disabled');
or
或者
$('input[type=button]').attr('disabled','disabled');
$('input[type=button]').attr('disabled','disabled');
UPDATE
更新
To target a particular button, given the HTML you provided:
根据您提供的 HTML，定位特定按钮：
$('div#DT1S input[type=button]').attr('disabled','disabled');
$('div#DT1S input[type=button]').attr('disabled','disabled');
回答by Vikas
For link button,
对于链接按钮，
Calling .button('enable')method only gives effect, but functionally don't.
调用.button('enable')方法只产生效果，但在功能上没有。
But I have a trick. We could use HTML5 data-attribute to save/swap value of hrefand onclick.
但我有一个技巧。我们可以使用 HTML5data-属性来保存/交换href和 的值onclick。
see:
看：
source code mode:
源代码模式：
回答by robnardo
You are getting that error probably because the element is not within the DOM yet. $(document).ready(); will not work. Try adding your code to a pageinit event handler.
您收到该错误可能是因为该元素尚未在 DOM 中。$(文件).ready(); 不管用。尝试将您的代码添加到 pageinit 事件处理程序。
Here is a working example:
这是一个工作示例：
<!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>
Hope that helps someone
希望能帮助某人
