web-dev-qa-db-ja.com

jQuery Mobileのボタンを無効にする

これはjQuery Mobile用です。すべての通常のjQuery回答が機能するとは限りません。

JQuery Mobileでボタンを無効にできません。

jQuery Mobileは使用するように言っています

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

しかし、Firebugでエラーメッセージが表示されます。

キャッチされない例外：初期化前にボタンのメソッドを呼び出すことはできません。メソッド「disable」を呼び出そうとしました。

ページのドキュメント準備セクションにあるので、まだ初期化されていないことがわかりません。

IDでボタンを直接呼び出してみましたが、うまくいきません。

私はもう試した：

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

動作しません。

値が何であるかに基づいて1つのボタンを有効にするスイッチコマンドもあります。正しい「ケース」ステートメントへのルーティングを行う部分はありますが、jQuery mobileのボタンの有効化/無効化が機能していません。

コード： http://Pastebin.com/HGSbpAHQ

jqueryjquery-mobile
63
swg1cor14

更新：

この質問にはまだ多くのヒットがあるので、ボタンを無効にする方法に関する現在のjQM Docsも追加しています。

更新された例：

無効化されたフォームボタンを有効化

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

フォームボタンを無効にする

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

フォームボタンを更新更新
JavaScriptを介してフォームボタンを操作する場合、視覚的なスタイルを更新するには、そのボタンでrefreshメソッドを呼び出す必要があります。

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

ボタンのようなスタイルのリンクには、以下の実際のフォームベースのボタンとすべて同じ視覚オプションがありますが、いくつかの重要な違いがあります。リンクベースのボタンはボタンプラグインの一部ではなく、基になるbuttonMarkupプラグインのみを使用してボタンスタイルを生成するため、フォームボタンメソッド（有効化、無効化、更新）はサポートされません。リンクベースのボタン（または任意の要素）を無効にする必要がある場合は、JavaScriptを使用して無効なクラスui-disabledを自分で適用して同じ効果を得ることができます。

107
Phill Pafford

キャッチされない例外：初期化前にボタンのメソッドを呼び出すことはできません。メソッド「disable」を呼び出そうとしました。

これは、_.button_メソッドが呼び出されていないため、ボタンとして処理されない要素で呼び出ししようとしていることを意味します。したがって、あなたの問題はセレクターでなければなりません。

すべての入力$('input')を選択しているため、ボタンだけでなくテキスト入力でもボタンウィジェットのネームスペースからdisableメソッドを呼び出そうとします。

$('button').attr("disabled", "disabled");はjQuery Mobileでは機能しません。非表示になり、jQuery Mobileが生成するマークアップに置き換えられるボタンを変更するためです。

HAVE TOボタンを無効にするjQueryMobileのメソッドを使用します正しいセレクターでのように：

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

必要と思われるのは、実際にボタンをボタンウィジェットとして定義することです。

同じ問題が発生しました（ベータ1）

やった

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

私の窓の準備ができたハンドラでは、その後、ドキュメントで言われているように動作しました：

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

これは、jqmがマークアップを変換していることと関係があると思いますが、実際にはボタンとリンクボタンの実際のボタンウィジェットをインスタンス化するわけではありません。

4
Jörgen Lindell

この質問を正しく読んでいる場合、jQueryモバイルの「ボタン」ウィジェットはHTMLボタン要素と同じものではないことに気付かないかもしれません。これは、以前に$('input').button('disable')を呼び出して入力のjQuery Mobileボタンウィジェットを初期化していない限り、$('input').button();を呼び出すことはできないと考えています。

もちろん、jQueryボタンウィジェット機能を使用したくない場合があります。その場合、Alexanderの答えはあなたを正しく設定するはずです。

4
RwwL

ページ上のコンテンツの読み取り専用ビューを完全に無効化または表示できるウィジェットを作成しました。すべてのボタン、アンカーの無効化、すべてのクリックイベントの削除などを行い、再び有効に戻すことができます。すべてのjQuery UIウィジェットもサポートします。仕事で書いたアプリケーション用に作成しました。自由に使用できます。

（ http://www.dougestep.com/dme/jquery-disabler-widget ）で確認してください。

3
dgestep

私の発見に基づいて...

このJavascriptエラーは、セレクターを使用して要素でbutton（）を実行し、同じ要素で異なるセレクターを使用してbutton（）の関数/メソッドを使用しようとすると発生します。

たとえば、次は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); });

したがって、クラスを開始したときに再度使用すると、問題が解決します。

2
tribulant

以下のステートメントのいずれかを試してください。

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

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

これは私のために機能します、無効にする-有効にするというロジックを試す必要があるかもしれません

2
Yene Mulatu

おそらく要素がまだDOM内にないため、このエラーが発生しています。 $（document）.ready（）;動作しないでしょう。 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>

誰かを助けることを願っています

0
robnardo

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");
0
deblocker

リンクボタンの場合、

.button('enable')メソッドを呼び出しても効果はありますが、機能的には効果がありません。

しかし、私にはトリックがあります。 HTML5 data-属性は、hrefおよびonclickの値を保存/交換します。

見る：

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

ソースコードモード：

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

0
Vikas

ボタンを無効にするには、CSSクラスdisabledを追加します。書く

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