Enable or disable a input fields with checkbox

Question

I am trying to create a form that will be enabled and disable depending on the checkbox tick mark.

    
      
        Is this client user
        
      
    
    
      
        
          Username:
        
        
          
        
      
      
        
          Password:

I am trying to make this javascript or jquery function that will allow me to disable or enable this portion with id="user_register".

Here is the code that I tried.

    function enableCreateUser() {
    if(document.getElementById("is_user").checked){
        document.getElementById("user_register").disabled = true;
    }
    if(!document.getElementById("is_user").checked){
        document.getElementById("user_register").disabled = flase;
    }

  }

Please help me complete this function. Thank you.

user_13669048 · Answer

You can simply use classList with add and remove function to add custom class .disable_section to show disabled on your section.

Live Demo:

function enableCreateUser() {
  if (document.getElementById("is_user").checked) {
    document.getElementById("user_register").classList.add('disable_section')
  } else {
    document.getElementById("user_register").classList.remove('disable_section')
  }
}

.disable_section {
  pointer-events: none;
  opacity: 0.4;
}


  
    Is this client user
    
  


  
    
      Username:
    
    
      
    
  
  
    
      Password:

If you want to disable the inputs specifically then you can simply assign ids to your inputs and disable them individually.

Live Demo

function enableCreateUser() {
  if (document.getElementById("is_user").checked) {
    document.getElementById("user_res").disabled = true;
    document.getElementById("pass").disabled = true;
  } else {
    document.getElementById("user_res").disabled = false;
    document.getElementById("pass").disabled = false;
  }
}


  
    Is this client user
    
  


  
    
      Username:
    
    
      
    
  
  
    
      Password:

user_6285054 · Answer

function enableCreateUser() {
  if (document.getElementById("is_user").checked) {
    disableForm(true);
  }
  if (!document.getElementById("is_user").checked) {
    disableForm(false);
  }

}

function disableForm(flag) {
  var elements = document.getElementsByClassName("form-control");
  for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].readOnly = flag;
    elements[i].disabled = flag;
  }
}


  
    Is this client user
    
  


  
    
      Username:
    
    
      
    
  
  
    
      Password:

user_14046126 · Answer

You can do it like this :

NOTE : Remove onclick on checkbox.

$('#is_user').on("change", function() {
  if ($(this).is(":checked")) {
    $('#user_register input').prop("disabled", true);
  } else {
    $('#user_register input').prop("disabled", false);
  }
});

user_2473883 · Answer

use .hidden() for control div

function enableCreateUser() {
    var status = document.getElementById("is_user").checked;
    document.getElementById("user_register").hidden = status;
  }


      
        Is this client user
        
      
    
    
      
        
          Username:
        
        
          
        
      
      
        
          Password:

user_13828124 · Answer

Check out this snippet:




    
    
    PURFECT MATCH
    
    
    
    
    

    


    
        
            Is this client user
            
        
    
    
        
            
                
                    Username:
                
                
                    
                
            
            
                
                    Password:

I have added form having id myForm. In the JavaScript section, using this id function enableCreateUser() access the form and we iterates over the elements of the form, setting their read-only status based on the value of checkbox is_user.

To initialize form elements we calling function enableCreateUser() just after the loading of document is done using onload in .

Enable or disable a input fields with checkbox

5 Answers