Enable or disable a input fields with checkbox

Question

I am trying to create a form that will be enabled and disabled 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"/>
        </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"/>
        </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 = false;
        }
    }

Please help me complete this function. Thank you.

flase is a typo and should be false. Also use else instead of checking both — Wimanicesir
– Wimanicesir, Commented Aug 10, 2020 at 8:31
You can not “disable” a div element. You will need to loop over the input elements inside this and disable them each individually - or you need to group them using a fieldset, that can be disabled. And don’t use onclick on checkbox elements, use onchange. — C3roe
– C3roe, Commented Aug 10, 2020 at 8:32

Always Helping · Accepted Answer · 2020-08-10 08:44:51Z

5

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>

edited Aug 10, 2020 at 8:44

answered Aug 10, 2020 at 8:34

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Avinash Dalvi Over a year ago

This is another way to solve this question. Upvoted. @Alwayshelping.

PaulScott Over a year ago

This is great code, but has an issue. And that is if there are other required fields on the same form, and the form is posted and one of the other fields has an error, the shaded fields are no longer shaded. Might be better to actually REMOVE the fields if the box is checked? However, they might come back on a post as well, not sure.

PaulScott Over a year ago

I figured out how to fix the problem I mentioned in the comment above. Simply add this on the page in the script code: ` <script> $(document).ready( function () { enableCreateUser(); }); </script> `

Avinash Dalvi · Accepted Answer · 2020-08-10 08:38:30Z

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>

jupeter · Accepted Answer · 2020-08-10 08:54:30Z

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>

Pranav Rustagi · Accepted Answer · 2020-08-10 08:58:37Z

0

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

edited Aug 10, 2020 at 8:58

answered Aug 10, 2020 at 8:50

Pranav Rustagi

2,7261 gold badge8 silver badges21 bronze badges

Comments

gpl · Accepted Answer · 2020-08-10 09:09:50Z

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

Anubis Lockward · Accepted Answer · 2022-12-12 23:12:35Z

0

I know that this might be an old question, but you can also use an event listener for the checkbox, and simply toggle the attribute disabled on and off for the desired input. Like this:

yourCheckbox.addEventListener('change', () => {
  yourInput.toggleAttribute('disabled');
});

Using the code you posted, it might look like this:

const yourCheckbox = document.querySelector('#is_user');

yourCheckbox.addEventListener('change', () => {
  const yourInput = document.querySelector('#user_register');

  yourInput.toggleAttribute('disabled');
});

answered Dec 12, 2022 at 23:12

Anubis Lockward

1152 silver badges11 bronze badges

Collectives™ on Stack Overflow

Enable or disable a input fields with checkbox

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related