enable disable jquery ui button with ajax

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.

Есть четыре способа узнать, как это будет работать.

1. Рекомендуемый способ: Вызов jQuery('.mybutton').button('disable')

2. Ваш путь (также рекомендуется): Вызов jQuery(".mybutton").button("option", "disabled", true);

3. Это нормально: Вызов jQuery(".mybutton").prop('disabled', true).button('refresh'). Это обновляет пользовательский интерфейс кнопки.

4. Не рекомендуется: Добавить/удалить классы непосредственно с кнопки.jQuery(".mybutton").addClass('ui-button-disabled ui-state-disabled');

Надеюсь, это объяснит вам, почему это работает именно так.

Answer 2

Вы больше не используете элемент plain-jane <button>, поэтому изменение атрибутов не будет иметь большого эффекта. jQuery-UI обертывает весь элемент DOM с помощью помощников, отдельных событий и других деталей, что делает необходимым аксессуар.

До тех пор, пока вы используете .button, придерживайтесь API и используйте настройку disabled. (Это справедливо для любого из различных виджетов - datepicker, слайдер и т. Д.). Подумайте об исходном элементе DOM в качестве заполнителя стандартов, который используется только для сохранения функциональности с помощью форм, но уже не является основным элементом пользовательского интерфейса.