6

我正在努力理解启用/禁用 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);

                   }
               }
            }
        });
    }
});

然后这应该再次启用按钮。要么proporattr要么 这篇文章似乎对我不起作用。只有当我这样做时：

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

我想我不明白为什么prop在禁用我的按钮时在这种情况下不起作用？始终使用按钮设置器的最佳做法是什么？

4

2 回答 2

9

在引擎盖下，该按钮已被禁用，但是，您看到的是一个样式已由 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');

希望这能向您解释为什么它会以这种方式工作。

于 2013-05-06T20:39:45.983 回答
2

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

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

于 2013-05-06T20:11:26.747 回答