如何从函数禁用 jQuery 对话框中的按钮？

基本对话框窗口是位于视口内的叠加层，不受 jQuery 用户界面页面内容的影响。基于以下方法从使用 jQuery 承载的函数禁用 jQuery 对话框中的按钮。

方法一：

• 在 UI 对话框中，按钮作为默认类称为 ui-button 所以关注它。
• 创建一个函数，该函数应在页面加载就绪时触发对话框。
• 然后使用 jQuery 方法 prop(‘disabled’, true) 通过类 ui-button 禁用该按钮。

句法：

$(selector).dialog();
$(selector).prop('disabled', true);

示例：下面的示例说明了如何在 prop() 方法的帮助下从函数禁用 jQuery 对话框中的按钮。

      

    
    
      
    
      
    
  
    
    
      
    
    
      
    
        .ui-widget-header {
            background: green;
            color: #ffffff;
        }
          
        #dialog {
            box-shadow: 1rem .5rem 1rem 
                rgba(0, 0, 0, .15) !important;
                  
            padding: 20px;
        }
    

  

    
          
        
            This is the default dialog which is useful
            for displaying information. The dialog
            window can be moved, resized and closed
            with the 'x' icon or use close button below,
            but it is diable using jQuery's prop();
            method.
        
          
        
            Close
        
    
      
    
        $(function() {
              
            // Trigger dialog box
            $("#dialog").dialog();
              
            // attr() method applied here
            $(".ui-button").prop('disabled', true);
        });
    

  

输出：

方法二：

• 在 UI 对话框中，按钮作为默认类称为 ui-button 所以关注它。
• 创建一个函数，该函数应在页面加载就绪时触发对话框。
• 然后使用 jQuery 方法 attr(‘disabled’, true) 通过类 ui-button 禁用该按钮。

句法：

$(selector).dialog();
$(selector).attr('disabled', true);

示例：下面的示例说明了如何在 attr() 方法的帮助下从函数禁用 jQuery 对话框中的按钮。

  

    
      
    
      
    
  
    
    
      
    
    
  
    
        .ui-widget-header {
            background: red;
            color: #ffffff;
        }
          
        #dialog {
            box-shadow: 1rem .5rem 1rem rgba(
            0, 0, 0, .15)!important;
            padding: 20px;
        }
    

  

    
      
        
            This is the default dialog which is
            useful for displaying information.
            The dialog window can be moved,
            resized and closed with the 'x'
            icon or use close button below,
            but it is diable using jQuery's
            attr(); method.
        
          
        
            Close
        
    
      
    
        $(function() {
              
            // Trigger dialog box
            $("#dialog").dialog();
              
            // attr() method applied here
            $(".ui-button").attr('disabled', true);
        });
    

  

输出：

参考： https : //www.geeksforgeeks.org/jqueryui-dialog/

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。