JS复选框启用/禁用在DIVs中包装输入时不起作用的输入组

复选框启用/禁用在DIVs中包装输入时不起作用的输入组是由于事件冒泡导致的。事件冒泡是指当一个事件被触发时，它会沿着DOM树向上冒泡，直到到达根节点。在这个过程中，父元素的事件处理程序也会被触发。

在这种情况下，当我们点击复选框时，事件会先触发复选框的事件处理程序，然后再触发包装输入的DIV的事件处理程序。由于事件冒泡的影响，DIV的事件处理程序会覆盖复选框的事件处理程序，导致复选框的启用/禁用状态无法正确地被处理。

为了解决这个问题，我们可以使用事件委托的方式来处理复选框的启用/禁用状态。事件委托是指将事件处理程序绑定到父元素上，然后通过事件冒泡来触发处理程序。这样可以确保复选框的事件处理程序在DIV的事件处理程序之前被触发。

以下是一个示例代码：

HTML:

<div id="wrapper">
  <input type="checkbox" class="checkbox" disabled>
</div>

JavaScript:

document.getElementById('wrapper').addEventListener('click', function(event) {
  if (event.target.classList.contains('checkbox')) {
    event.target.disabled = !event.target.disabled;
  }
});

在上面的代码中，我们将事件处理程序绑定到了包装输入的DIV元素上。当点击复选框时，事件会冒泡到DIV元素，然后通过判断事件的目标元素是否为复选框，来处理复选框的启用/禁用状态。

这种方式可以确保复选框的启用/禁用状态在DIV的事件处理程序之前被处理，从而解决了复选框启用/禁用在DIVs中包装输入时不起作用的问题。

腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
• 腾讯云存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain