选中复选框时启用文本框

在网页开发中，我们经常需要对表单元素进行操作，例如选中一个复选框时启用一个文本框。本文将介绍如何使用 jQuery 或 JavaScript 实现此功能。

jQuery

jQuery 是一个流行的 JavaScript 库，它可以简化 JavaScript 编程，提高开发效率。使用 jQuery 可以轻松实现复选框与文本框的关联。

首先，我们需要为复选框绑定一个 click 事件，当复选框被选中时会触发该事件。然后，我们可以使用 jQuery 的 prop() 方法来设置文本框的 disabled 属性，使其可以启用或禁用。

$("input[type='checkbox']").click(function() {
  if ($(this).is(":checked")) {
    $("input[type='text']").prop("disabled", false);
  } else {
    $("input[type='text']").prop("disabled", true);
  }
});

上述代码首先选择所有类型为 checkbox 的输入元素，然后绑定 click 事件。当复选框被选中时，会检查它是否处于选中状态，如果是，则启用所有类型为 text 的输入元素，否则禁用它们。

JavaScript

如果您不想使用 jQuery，也可以使用 JavaScript 实现该功能。这种方式比较繁琐，但可以避免使用额外的库，提高页面加载速度。

与 jQuery 不同，JavaScript 需要手动遍历包含所有复选框的集合，并为每个复选框绑定相应的事件处理程序。然后，我们可以使用 DOM 的操作方法来启用或禁用文本框。

var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("click", function() {
    var textboxes = document.querySelectorAll("input[type='text']");
    for (var j = 0; j < textboxes.length; j++) {
      if (this.checked) {
        textboxes[j].disabled = false;
      } else {
        textboxes[j].disabled = true;
      }
    }
  });
}

上述代码首先使用 document.querySelectorAll() 方法选择所有类型为 checkbox 的输入元素，并为它们绑定 click 事件。当复选框被选中时，会检查它是否处于选中状态，如果是，则启用所有类型为 text 的输入元素，否则禁用它们。

总结：

无论您是使用 jQuery 还是 JavaScript，都可以轻松实现复选框与文本框的关联。我们可以使用上述代码片段作为参考，并进行适当的修改以满足您的需求。