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


Answers

未知の例外:初期化の前にボタンのメソッドを呼び出すことはできません。 メソッド 'disable'を呼び出そうとしました。

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

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

$('button').attr("disabled", "disabled"); 隠れているボタンを変更し、jQuery Mobileによって生成されるマークアップに置き換えられるため、jQuery Mobileでは動作しません。

正しいセレクタでボタン無効にするjQueryMobileのメソッドを使用する必要があります

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

これはjQuery Mobile向けです。 すべての通常のjQueryの回答が機能するわけではありません。

jQuery Mobileでボタンを無効にすることはできません。

jQuery Mobileは、

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

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

未知の例外:初期化の前にボタンのメソッドを呼び出すことはできません。 メソッド 'disable'を呼び出そうとしました。

それは私のページのドキュメント準備が整ったセクションにあるので、まだ初期化されていない方法はわかりません。

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

私はもう試した:

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

動作しません。

私はまた、値が何であるかに基づいて1つのボタンを有効にするスイッチコマンドを持っています。 私はその部分を右の "case"ステートメントにルーティングするが、jQuery Mobileのenable / disableボタンのものは機能していない。

コード: http://pastebin.com/HGSbpAHQ : http://pastebin.com/HGSbpAHQ




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



要素がまだ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>

誰かを助けることを願って




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

このJavascriptエラーは、セレクタを持つ要素に対してbutton()を実行し、同じ要素の別のセレクタでbutton()の関数/メソッドを使用しようとすると発生します。

たとえば、HTMLは次のようになります。

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

つまり、ボタン()を実行します:

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

次に、あなたがそれを起動したときにクラスを使用せずに、IDを使用してこの時間を無効にしようとすると、このスレッドのタイトルがついているのでエラーが表示されます:

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

だからあなたがそれを開始したときにクラスを再び使用すると、それが問題を解決します。




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

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




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

私は同じ問題を抱えていました(ベータ1)

やった

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

私のウィンドウの準備が整ったハンドラでは、それはそれが文書で言われているように、すなわち、働いた:

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

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




Links