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=disabled]）。相反，它会向按钮添加两个类，其中包含已禁用的按钮样式：ui-button-disabled，ui-state-disabled。

我知道有四种方法可行。

推荐方式：致电jQuery('.mybutton').button('disable')
您的方式（也推荐）：致电jQuery( ".mybutton" ).button( "option", "disabled", true );
这很好：致电jQuery(".mybutton").prop('disabled', true).button('refresh')。这会刷新按钮UI。
不推荐的方式：直接从按钮添加/删除类。 jQuery(".mybutton").addClass('ui-button-disabled ui-state-disabled');

希望这能解释为什么它会这样运作。

Answer 2

您不再使用普通的<button>元素，因此更改属性不会产生太大影响。 jQuery-UI用帮助器，分隔的事件和其他细节包装整个DOM元素，使得需要选项访问器。

只要您使用.button，请坚持使用API并使用disabled设置。（这适用于任何各种小部件 - 日期选择器，滑块等）。只需将原始DOM元素视为标准占位符，它仅用于保留表单的功能，但不再是主要UI元素。

使用ajax启用禁用jquery ui按钮

2 个答案: