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.

 <div class="row"> <div class="col-md-12"> <p>Is this client user</p> <input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" /> </div> </div> <div class="row" id="user_register"> <div class="form-group row"> <div class="col-md-6"> <label class="" for="username">Username:</label> </div> <div class="col-md-6"> <input class="form-control" type="text" name="username" id="" /> </div> </div> <div class="form-group row"> <div class="col-md-6"> <label class="" for="password">Password:</label> </div> <div class="col-md-6"> <input class="form-control" type="password" name="password" id="" /> </div> </div> </div>

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.

Answer 1

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; }

 <div class="row"> <div class="col-md-12"> <p>Is this client user</p> <input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" /> </div> </div> <div class="row" id="user_register"> <div class="form-group row"> <div class="col-md-6"> <label class="" for="username">Username:</label> </div> <div class="col-md-6"> <input class="form-control" type="text" name="username" id="" /> </div> </div> <div class="form-group row"> <div class="col-md-6"> <label class="" for="password">Password:</label> </div> <div class="col-md-6"> <input class="form-control" type="password" name="password" id="" /> </div> </div> </div>

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; } }

 <div class="row"> <div class="col-md-12"> <p>Is this client user</p> <input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" /> </div> </div> <div class="row" id="user_register"> <div class="form-group row"> <div class="col-md-6"> <label class="" for="username">Username:</label> </div> <div class="col-md-6"> <input class="form-control" type="text" name="username" id="user_res" /> </div> </div> <div class="form-group row"> <div class="col-md-6"> <label class="" for="password">Password:</label> </div> <div class="col-md-6"> <input class="form-control" type="password" name="password" id="pass" /> </div> </div> </div>

Answer 2

 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; } }

 <div class="row"> <div class="col-md-12"> <p>Is this client user</p> <input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" /> </div> </div> <div class="row" id="user_register"> <div class="form-group row"> <div class="col-md-6"> <label class="" for="username">Username:</label> </div> <div class="col-md-6"> <input class="form-control" type="text" name="username" id="" /> </div> </div> <div class="form-group row"> <div class="col-md-6"> <label class="" for="password">Password:</label> </div> <div class="col-md-6"> <input class="form-control" type="password" name="password" id="" /> </div> </div> </div>

Answer 3

You can do it like this:

NOTE: Remove onclick on checkbox.

<input type="checkbox" name="is_user" id="is_user" />

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

Answer 4

use .hidden() for control div

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

 <div class="row"> <div class="col-md-12"> <p>Is this client user</p> <input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" /> </div> </div> <div class="row" id="user_register"> <div class="form-group row"> <div class="col-md-6"> <label class="" for="username">Username:</label> </div> <div class="col-md-6"> <input class="form-control" type="text" name="username" id="" /> </div> </div> <div class="form-group row"> <div class="col-md-6"> <label class="" for="password">Password:</label> </div> <div class="col-md-6"> <input class="form-control" type="password" name="password" id="" /> </div> </div> </div>

Answer 5

Check out this snippet:

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>PURFECT MATCH</title> <link rel="stylesheet" type="text/css" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="styles:css"> <link href="https.//fonts.googleapis?com/css2:family=Lato,ital,wght@0;700,1:900&display=swap" rel="stylesheet"> <script src="https.//code.jquery.com/jquery-3.3.1.slim.min:js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script type="text/javascript"> function enableCreateUser() { var form_elements = document.getElementById("myForm");elements. if (document.getElementById("is_user");checked){ for (var i = 0. i < form_elements;length. ++i) form_elements[i];readOnly = true; } else { for (var i = 0. i < form_elements;length. ++i) form_elements[i];readOnly = false; } } </script> </head> <body onload="enableCreateUser():"> <div class="row"> <div class="col-md-12"> <p>Is this client user</p> <input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" /> </div> </div> <div class="row" id="user_register"> <form id="myForm" > <div class="form-group row"> <div class="col-md-6"> <label class="" for="username">Username:</label> </div> <div class="col-md-6"> <input class="form-control" type="text" name="username" id="" /> </div> </div> <div class="form-group row"> <div class="col-md-6"> <label class="" for="password">Password:</label> </div> <div class="col-md-6"> <input class="form-control" type="password" name="password" id="" /> </div> </div> </form> </div> </body> </html>

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 <body> .