javascript - Enable or disable a input fields with checkbox - Stack Overflow

admin管理员组

文章数量:1287993

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 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 plete this function. Thank you.

• javascript
• html

Share Improve this question Follow edited Jul 3, 2023 at 10:07 Dmitriy Popov 2,36033 gold badges2727 silver badges3838 bronze badges asked Aug 10, 2020 at 8:28 MohsinMohsin 48577 silver badges1515 bronze badges 3

• You want to disable input only or the whole section ? – Always Helping Commented Aug 10, 2020 at 8:31
• flase is a typo and should be false. Also use else instead of checking both – Wimanicesir Commented Aug 10, 2020 at 8:31
• 2 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 Commented Aug 10, 2020 at 8:32

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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>

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>

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>

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

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./bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis./css2?family=Lato:ital,wght@0,700;1,900&display=swap" rel="stylesheet">
    <script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn./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>.

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

本文标签： javascriptEnable or disable a input fields with checkboxStack Overflow