ajaxでjquery uiボタンを無効にする

Question

jquery uiボタンを有効/無効にするオプションを理解するのが苦労しています。

私が使用したボタンのいずれかの種類のために、過去に一般的に

：

jQuery(".mybutton").prop('disabled', false); 

をあなたはそれが真/偽になり無効/有効にするかどうかに応じて、。

これはjqueryのUIボタンでも機能するようです。私がやっていたことは、あるカウントをチェックし、最初にページをロードするときにボタンを無効にすることでした。

しかし、誰かが（AJAX呼び出しを経由して）何かを削除することにより、カウント値を変更することができます：

//delete 
jQuery(document).on("click", ".deletebutton", function() { 
    if (confirm("Are you sure you want to delete?")) 
    { 
     var hash = jQuery(this).data("delete"); 
     var $this = jQuery(this); 
     jQuery.ajax({ 
      url: "index.php?option=com_cam&task=delete&hash="+ hash +"&"+getToken()+"=1&format=raw", 
      dataType: 'json', 
      type: "POST", 
      success: function(data){ 
       if (data.type == 'error') 
       { 
        //error message printed to user 
       } 
       else 
       { 
        $this.closest("tr").remove(); 
        //deleted so decrement and check if you have exceeded your limit 

        count=count-1; 
        if (count >= limit) 
        { 
          //disable buttons 
          jQuery(".mybutton").button("option", "disabled", true); 
        } 
        else 
        { 
         //enable add buttons and hide message 
         jQuery(".mybutton").button("option", "disabled", false); 
         //jQuery(".mybutton").attr('disabled', false); 
         //jQuery(".mybutton").prop('disabled', false); 

        } 
       } 
      } 
     }); 
    } 
}); 

その後、これが再びボタンを有効にする必要があります。 propまたはattr、またはpostのいずれも私のために機能していないようです。私はこれやったときにのみ：

jQuery(".mybutton").button("option", "disabled", false); 

を私はそれが私のボタンを無効にする作業を行う際にpropは、このコンテキストでは機能しない理由を私は理解していないと思いますか？常にsetterボタンを使用することをお勧めしますか？

Answer 1

フードの下でボタンは無効になっていますが、表示されるのはjQuery UIによってスタイルが設定されたボタンです。

jQuery UIは、無効な属性（[disabled=disabled]など）を使用してスタイルを設定しません。代わりに、無効なボタンスタイル（ui-button-disabled,ui-state-disabled）を含むボタンに2つのクラスを追加します。

私はそれが動作することを知っている4つの方法があります。

1. 推奨される方法：コール（も推奨）jQuery('.mybutton').button('disable')

2. ユア・ウェイ：コールjQuery(".mybutton").button("option", "disabled", true);

3. これは素晴らしいです：コールjQuery(".mybutton").prop('disabled', true).button('refresh')。これにより、ボタンのUIがリフレッシュされます。

4. 推奨されない方法：ボタンから直接クラスを追加/削除します。jQuery(".mybutton").addClass('ui-button-disabled ui-state-disabled');

これがなぜこのように動作するのかを説明します。

Answer 2

あなたはもはやプレーンジェーン<button>要素を使用していないので、属性を変更してもそれほど効果はありません。 jQuery-UIは、DOM要素全体をヘルパー、分離されたイベント、およびオプションアクセサを必要とするその他の詳細でラップします。

.buttonを使用している場合は、APIを使用してdisabledの設定を使用してください。 （これは、datepicker、sliderなどのさまざまなウィジェットのいずれにも当てはまります）。オリジナルのDOM要素を、フォームで機能を保持するためにのみ使用されるが、もはや主UI要素ではない標準プレースホルダと考えるとよいでしょう。