如何使用 jQuery 启用/禁用表单元素内的所有输入控件？

给出一个包含表单元素的 HTML 文档。表单元素包含输入元素、选项元素和按钮元素。使用 jQuery 启用或禁用表单内的所有输入控件的任务。可以通过使用prop() 方法来完成。

使用 prop() 方法：用于设置或返回被选元素的属性和值。

句法：

$(selector).prop( property, value )

示例 1：在此示例中， .prop()方法用于禁用表单元素内的所有输入控件。

  

    
        How to enable and disable all input
        controls inside a form using jQuery?
    
      
    
    

  

      
     
        GeeksForGeeks 
     
      
    
        How to enable and disable all input
        controls inside a form using jQuery ?
    
    
      
     
        
            GFG Registration Form
        
          
        Name:
        
              
        Gender:
          
         
            Male
             
          
        
            Female
        
          
        Address:
          
        
          
        Country:
          
        
            select
        
          
        
          
        Submit
        Reset
    
      
    
      
    
    
  
    
        function enable_disable() { 
            $("#GFG :input").prop("disabled", true);
        }
    

  
        

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例 2：在此示例中， .prop()方法用于启用表单内的所有输入控件。

  

    
        How to enable/disable all input controls
        inside a form using jQuery?
    
  
    
    

  

  
     
        GeeksForGeeks 
     
  
    
        How to enable and disable all input 
        controls inside a form using jQuery ?
    
    
  
     
        
            GFG Registration Form
        
          
        Name: 
          
        Gender:
         Male     
         Female
          
        Address:
        
          
        Country:
        
            select
        
          
        
          
        Submit
        Reset
    
      
    
      
    
    
  
    
        $(document).ready(function() {
            $("#GFG :input").prop("disabled", true);
        });
          
        function enable_disable() { 
            $("#GFG :input").prop("disabled", false);
        }
    

  
 

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例 3：在此示例中，启用和禁用表单内的所有输入控件是按顺序完成的。

  

    
        How to enable and disable all input
        controls inside a form using jQuery ?
    
      
    
    

  

  
     
        GeeksForGeeks 
     
  
    
        How to enable and disable all input 
        controls inside a form using jQuery ?
    
    
      
     
        
            GFG Registration Form
        
          
        Name: 
          
        Gender:
         Male     
         Female
          
        Address:
        
          
        Country:
        
            select
        
        
          
        Submit
        Reset
    
      
    
      
    
    
  
    
        $(document).ready(function() {
            $("#GFG :input").prop("disabled", true);
            $(".slide-toggle").click(function() {
                if (this.value=="Enable") {
                    this.value = "Disable";
                    $("#GFG :input").prop("disabled", false);
                }
                else {
                    this.value = "Enable";
                    $("#GFG :input").prop("disabled", true);
                }
            });
        });
    

  

输出：

• 点击按钮前：
  
• 单击启用按钮后：
  
• 单击禁用按钮后：