Question

这适用于jQuery Mobile。并非所有常规的jQuery答案都可以。

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

jQuery Mobile说要使用

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

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

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

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

我已尝试直接通过其ID调用按钮，但这不起作用。

我试过了：

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

不起作用。

我还有一个切换命令，可以根据值来启用一个按钮。我已经将它的部分路由到了正确的“case”语句，但是jQuery mobile中的启用/禁用按钮功能无效。

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

Answer 1

更新：

由于这个问题仍然受到很多关注，我还在添加关于如何禁用该按钮的当前jQM文档：

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-methods.html

更新的例子：

启用已启用已停用的表单按钮

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

链接按钮示例：

http://jsfiddle.net/gRLYQ/6/

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实现同样的效果。

Answer 2

未捕获的异常：无法调用按钮之前的方法初始化;试图打电话方法'禁用'。

这意味着您尝试在未作为按钮处理的元素上调用它，因为没有调用.button方法。因此，您的问题必须是选择器。

您正在选择所有输入$('input')，因此它尝试从按钮小部件命名空间调用方法disable，不仅在按钮上，而且在文本输入上。

$('button').attr("disabled", "disabled");将无法与jQuery Mobile一起使用，因为您修改了hiden按钮并由jQuery Mobile生成的标记替换。

您必须使用jQueryMobile的方法来禁用带有正确选择器的按钮，如：

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

Answer 3

如果我正确地阅读了这个问题，你可能会错过jQuery移动“按钮”小部件与HTML按钮元素不同。我认为这归结为你无法调用$('input').button('disable')，除非你之前已经调用$('input').button();来初始化输入中的jQuery Mobile按钮小部件。

当然，你可能不想使用jQuery按钮小部件功能，在这种情况下，亚历山大的答案应该让你正确。

Answer 4

似乎需要将按钮实际定义为按钮小部件。

我有同样的问题（在测试版1中）

我做了

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

在我的窗口准备处理程序中，之后它按照文档中所说的那样工作，即：

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

我想这与jqm正在转换标记有关，但实际上并没有为按钮和链接按钮设置真正的按钮小部件。

Answer 5

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

在（http://www.dougestep.com/dme/jquery-disabler-widget）处查看。

Answer 6

尝试以下陈述之一：

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

或

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

<强>更新

根据您提供的HTML，定位特定按钮：

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

http://jsfiddle.net/kZcd8/

Answer 7

  $(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>

这个对我有用，你可能需要训练禁用 - 启用

的逻辑

Answer 8

根据我的发现......

当您对带有选择器的元素执行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); });

所以请在启动时再次使用该类，这样才能解决问题。

Answer 9

对于链接按钮，

调用.button('enable')方法只会生效，但功能上不会。

但我有一个技巧。我们可以使用HTML5 data-属性来保存/交换href和onclick的值。

请参阅：

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

源代码模式：

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

Answer 10

您收到该错误可能是因为该元素尚未在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>

希望能帮到某人

Answer 11

要禁用按钮，请向其添加css类disabled。写

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

Answer 12

对于jQuery Mobile 1.4.5：

对于锚点按钮，CSS类为：ui-state-disabled，对于输入按钮，它足以切换disabled属性。

＆＃13;

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","");
}

＆＃13;

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

＆＃13;

BTW，对于输入按钮，还有另一种方法：

启用：

$(".class").prop("disabled", false).removeClass("ui-state-disabled");

禁用：

$(".class").prop("disabled", true).addClass("ui-state-disabled");

在jQuery Mobile中禁用按钮

12 个答案: