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

Question

Это для jQuery Mobile. Не все обычные ответы JQuery будут работать.

Мне не удается отключить кнопки в jQuery Mobile.

jQuery Mobile говорит использовать

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

Но я получаю сообщение об ошибке в Firebug:

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

Он находится в разделе готовых документов на моей странице, поэтому я не знаю, как он еще не инициализирован.

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

Я пробовал:

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

Не работает.

У меня также есть команда switch, которая активирует одну кнопку в зависимости от значения. У меня есть эта часть, где она направляется в правильные операторы "case", но кнопки включения / выключения в jQuery mobile не работают.

код: http://pastebin.com/HGSbpAHQ

Answer 1

UPDATE:

Так как этот вопрос все еще получает много просмотров, я также добавляю текущие Документы jQM о том, как отключить кнопку:

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

Обновлены примеры:

enable включить отключенную кнопку формы

$('[type="submit"]').button('enable');  

отключить отключить кнопку формы

$('[type="submit"]').button('disable'); 

обновить обновить кнопку формы
Если вы манипулируете кнопкой формы с помощью JavaScript, вы должны вызвать метод refresh для обновления визуальный стиль.

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

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

Answer 2

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

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

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

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

Вы ДОЛЖНЫ использовать метод jQueryMobile для отключения кнопки с правильным селектором , например:

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

Answer 3

То, что кажется необходимым, это фактически определить кнопку как виджет кнопки.

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

Я сделал

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

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

Например, вот 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); });

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

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>

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

Answer 8

Попробуйте одно из следующих утверждений:

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

Answer 9

Для 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>

Кстати, для кнопок ввода есть альтернативный метод:

Включить:

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

Отключить:

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

Answer 10

Чтобы отключить кнопку, добавьте к ней класс disabled. написать

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