使用复选框启用或禁用输入字段

Question

我正在尝试创建一个表单，该表单将根据复选框刻度线启用和禁用。

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

我正在尝试制作这个 javascript 或 jquery 函数，它允许我使用id="user_register".

这是我尝试过的代码。

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

请帮我完成这个功能。谢谢。

Answer 1

您可以简单地使用带有添加和删除功能的classList来添加自定义类以在您的部分上显示禁用。.disable_section

现场演示：

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>

如果您想inputs 专门禁用，那么您可以简单地分配ids给您的输入并单独禁用它们。

现场演示

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>