web-dev-qa-db-ja.com

jQuery Mobileでリンクボタンを無効にする方法は？

私は次のようなjQuery1.6.1リンクボタンを備えたjQueryMobile Beta 1Webサイトを持っています。

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

そしてdocument.readyでクリックイベントを設定しました：

$('#subselection').livequery("click", function(){
  alert('test');
});

この「リンクボタン」を無効にしたいのですが、試してみました

$('#subselection').button('disable')

そして、そのコマンドは、ボタンのスタイルを無効に設定しますが、クリックイベントは機能します。

私も試しました

$('#subselection').prop('disabled', true);

および$（ '＃subselection'）。prop（ 'disabled'）; trueを返しますが、無効にはなりません。

誰かが良い考えを持っています。

javascriptjquerymobilejquery-mobile
14
RickardP

a要素にはプロパティdisabledがありません。したがって、1つを定義しても、それにアタッチしている可能性のあるイベントハンドラーには影響しません。

例： http://jsfiddle.net/niklasvh/n2eYS/

使用可能な属性のリストについては、 HTML 5リファレンス を参照してください。

問題を解決するには、代わりに、たとえば、要素でdisabledをdataとして割り当てることができます。

$('#subselection').data('disabled',true);

次に、イベントでそのセットがあるかどうかを確認します。

if (!$(this).data('disabled'))

例： http://jsfiddle.net/niklasvh/n2eYS/5/

13
Niklas

リンクボタンの例：

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を自分で適用して、同じ効果を実現することができます。

26
Phill Pafford

この場合、jquery/javascriptは必要ありません。 'ui-disabled'クラスを追加するだけです。

たとえば：

<a class="ui-disabled" id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

それは私がしていることです、そしてそれは私のために働きます;）

9
Gillian Lo Wong

使ってみてください

$('#subselection').button().button('disable'); //disable in JQM

$('#subselection').button().button('enable'); //enable in JQM

これは視覚的に無効/有効スタイルを表示するように機能しているようです...ただし、「ボタン」はまだクリック可能です（注意してください！：P）

2
Erik Yuzwa

これに対する答えはすでに受け入れられていることは知っていますが、この答えははるかに理解しやすいと思います。クリック関数がfalseを返すようにするだけです。

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

<script>
$('#subselection').click(function() {
    alert("do some code here");
    return false;
});
</script>
1
Richard Kersey

または、ボタンタグ/ウィジェットを直接使用することもできます<button>TEST</button>適切な無効化があります。イベントをキャッチしてJavaScriptを実行するためだけに使用している場合は、リンクを使用することでどのような利点があるかわかりません。

0
Danny C