Отключить кнопки в jQuery Mobile

Ответ 1

UPDATE:

Поскольку этот вопрос по-прежнему получает много хитов, я также добавляю текущие jQM Docs о том, как отключить кнопку:

• 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');

Оригинальное сообщение ниже:

Live Пример: http://jsfiddle.net/XRjh2/2/

UPDATE:

Используя пример @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

Связи, созданные как кнопки, имеют все те же визуальные параметры, что и истинные основанные на форме кнопки ниже, но есть несколько важных отличий. Кнопки на основе ссылок не являются частью плагина кнопки и просто используют базовый плагин buttonMarkup для создания стилей кнопок, чтобы методы кнопки формы (включить, отключить, обновить) не поддерживаются. Если вам нужно отключить кнопку на основе ссылки (или любой элемент), это можно применить отключенный класс ui-disabled самостоятельно с помощью JavaScript для достижения того же эффекта.

Ответ 2

исключение uncaught: невозможно вызвать методы на кнопке до инициализация; попытался позвонить метод "отключить".

это означает, что вы пытаетесь вызвать его на элементе, который не обрабатывается как кнопка, потому что на нем не был вызван метод .button. Поэтому ваша проблема ДОЛЖНА быть селектором.

Вы выбираете все входы $('input'), поэтому он пытается вызвать метод disable из пространства имен виджета кнопок не только на кнопках, но и на текстовых вводах.

$('button').attr("disabled", "disabled"); не будет работать с jQuery Mobile, потому что вы изменяете кнопку, которая скрывается и заменяется разметкой, создаваемой jQuery Mobile.

Вы ИМЕЕТЕ использовать метод jQueryMobile для отключения кнопки с помощью правильного селектора, например:

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

Ответ 3

Если я правильно прочитал этот вопрос, вам может не хватать, что виджет jQuery mobile "button" - это не то же самое, что элемент кнопки HTML. Я думаю, что это сводится к тому, что вы не можете вызвать $('input').button('disable'), если ранее вы не вызывали $('input').button();, чтобы инициализировать виджет кнопки jQuery Mobile на вашем входе.

Конечно, вы не можете использовать функцию виджета кнопок jQuery, и в этом случае ответ Alexander должен правильно установить вас.

Ответ 4

Кажется, что нужно на самом деле определить кнопку как виджет кнопки.

У меня была та же проблема (в бета-версии 1)

Я сделал

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

в моем готовом обработчике окна, после чего он работал, как сказано в документах, то есть:

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

Я предполагаю, что это связано с тем, что jqm преобразует разметку, но на самом деле не устанавливает реальный виджет кнопки для кнопок и ссылок.

Ответ 5

Я создал виджет, который может полностью отключить или представить просмотр содержимого на вашей странице только для чтения. Он отключает все кнопки, привязки, удаляет все события кликов и т.д. И может снова включить их обратно. Он даже поддерживает все виджеты jQuery UI. Я создал его для приложения, которое я написал на работе. Вы можете использовать его.

Проверьте это (http://www.dougestep.com/dme/jquery-disabler-widget).

Ответ 6

Попробуйте одно из приведенных ниже инструкций:

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

или

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

UPDATE

Чтобы настроить таргетинг на определенную кнопку, учитывая предоставленный HTML-код:

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

http://jsfiddle.net/kZcd8/

Ответ 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>

Эта работа для меня может потребоваться для тренировки логики, disable -enable

Ответ 8

Основываясь на моих выводах...

Эта ошибка Javascript возникает, когда вы выполняете кнопку() для элемента с селектором и пытаетесь использовать функцию/метод кнопки() с другим селектором в том же элементе.

Например, вот HTML:

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

Итак, вы выполняете на нем кнопку():

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

Затем вы пытаетесь отключить его, на этот раз не используя класс по мере его запуска, а скорее используя идентификатор, тогда вы получите ошибку, поскольку этот поток называется:

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

Поэтому скорее используйте класс снова, когда вы его инициировали, и это решит проблему.

Ответ 9

Для кнопки ссылки

Вызов метода .button('enable') дает эффект, но функционально не работает.

Но у меня есть трюк. Мы могли бы использовать атрибут HTML5 data- для сохранения/замены значения href и onclick.

см

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

режим исходного кода:

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

Ответ 10

Вы получаете эту ошибку, вероятно, потому, что элемент еще не находится в DOM. $(Документ).ready(); не будет работать. Попробуйте добавить свой код к обработчику событий на странице.

Вот рабочий пример:

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

Надеюсь, что кто-то поможет

Ответ 11

Для отключения кнопки добавьте к нему класс css disabled. написать

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

Ответ 12

Для 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="#" onclick="location.href='https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css'; return false;">
  <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>