勾选时激活input 否则禁用的javascript代码

2023年6月10日下午8:07 • JavaScript

下面是“勾选时激活input 否则禁用的javascript代码”的攻略。

准备工作

在正式编写代码之前，我们需要准备一个HTML页面和一个JS文件。

首先，我们需要在HTML页面中添加一个input框和一个复选框。代码如下所示：

<label for="input1">输入框1：</label>
<input type="text" id="input1" name="input1" /><br>
<label for="checkbox">激活输入框1：</label>
<input type="checkbox" id="checkbox" name="checkbox" />

接着，我们将JS代码写入到一个单独的文件中（例如，我们将其保存为“app.js”）。然后，将JS文件链接到HTML页面上。代码如下所示：

<script src="app.js"></script>

编写JS代码

为了实现“勾选时激活input 否则禁用”的效果，我们需要编写以下JS代码：

首先，我们需要获取input框和复选框的元素：

const input1 = document.getElementById("input1");
const checkbox = document.getElementById("checkbox");

然后，我们需要为复选框添加监听事件，并在每次点击复选框时，执行以下代码：

checkbox.addEventListener("click", function() {
  if (checkbox.checked) {
    input1.disabled = false;
  } else {
    input1.disabled = true;
  }
});

详细解释：监听复选框的点击事件，如果复选框被勾选，则将input1的disabled属性设置为false，即input1被激活；如果复选框被取消勾选，则将input1的disabled属性设置为true，即input1被禁用。

示例演示

示例1：在HTML页面中添加一个输入框和一个复选框，通过JS代码勾选时激活input；取消勾选时禁用input：

<!DOCTYPE html>
<html>
<head>
  <title>示例1：勾选时激活input，取消勾选时禁用</title>
</head>
<body>
  <label for="input1">输入框1：</label>
  <input type="text" id="input1" name="input1" /><br>
  <label for="checkbox">激活输入框1：</label>
  <input type="checkbox" id="checkbox" name="checkbox" />

  <script>
    const input1 = document.getElementById("input1");
    const checkbox = document.getElementById("checkbox");

    checkbox.addEventListener("click", function() {
      if (checkbox.checked) {
        input1.disabled = false;
      } else {
        input1.disabled = true;
      }
    });
  </script>
</body>
</html>

示例2：在HTML页面中添加多个输入框和多个复选框，通过JS代码分别实现勾选时激活和取消勾选时禁用：

<!DOCTYPE html>
<html>
<head>
  <title>示例2：多个输入框和复选框的激活和禁用</title>
</head>
<body>
  <label for="input1">输入框1：</label>
  <input type="text" id="input1" name="input1" /><br>
  <label for="checkbox1">激活输入框1：</label>
  <input type="checkbox" id="checkbox1" name="checkbox1" /><br>

  <label for="input2">输入框2：</label>
  <input type="text" id="input2" name="input2" /><br>
  <label for="checkbox2">激活输入框2：</label>
  <input type="checkbox" id="checkbox2" name="checkbox2" /><br>

  <script>
    const input1 = document.getElementById("input1");
    const checkbox1 = document.getElementById("checkbox1");
    const input2 = document.getElementById("input2");
    const checkbox2 = document.getElementById("checkbox2");

    checkbox1.addEventListener("click", function() {
      if (checkbox1.checked) {
        input1.disabled = false;
      } else {
        input1.disabled = true;
      }
    });

    checkbox2.addEventListener("click", function() {
      if (checkbox2.checked) {
        input2.disabled = false;
      } else {
        input2.disabled = true;
      }
    });
  </script>
</body>
</html>

以上就是“勾选时激活input 否则禁用的javascript代码”的完整攻略，希望能帮助到您！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：勾选时激活input 否则禁用的javascript代码 - Python技术站