jquery - 使用ajax启用禁用jquery ui按钮

Question

我正在努力理解启用/禁用 jquery ui 按钮的选项。

过去通常对于我使用过的任何类型的按钮:

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

根据您是否希望启用/禁用它，它会是 false/true。

这似乎也适用于 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')。这会刷新按钮 UI。

4. 不推荐的方法:直接从按钮添加/删除类。 jQuery(".mybutton").addClass('ui-button-disabled ui-state-disabled');

希望这能向您解释为什么它会这样工作。