子元素禁用时如何触发父元素inputGroup的点击事件？

问题核心是禁用的表单元素不会触发任何鼠标事件，也不会将事件冒泡到父元素，所以点击被禁用的textInput时，inputGroup的click事件无法触发。下面提供两种可行的解决思路：

方法1：用伪元素覆盖禁用输入框 #

给inputGroup添加全屏覆盖的伪元素，当textInput处于禁用状态时，伪元素接收点击事件并传递给父容器；textInput启用时隐藏伪元素，避免遮挡输入操作。

修改后的代码 #

function newGroupMember(name) {
    let inputGroup = document.createElement("div");
    inputGroup.style.position = "relative";
    inputGroup.classList.add("input-group");

    let checkBoxContainer = document.createElement("div");
    checkBoxContainer.style.position = "absolute";
    checkBoxContainer.style.right = "8px";
    checkBoxContainer.style.top = "50%";
    checkBoxContainer.style.transform = "translateY(-50%)";
    checkBoxContainer.style.zIndex = "10";

    let textInput = document.createElement("input");
    textInput.type = "text";
    textInput.value = name;
    textInput.setAttribute("readonly", "");
    textInput.setAttribute("disabled", "");
    textInput.style.width = "100%";
    textInput.style.paddingRight = "30px";

    let checkBox = document.createElement("input");
    checkBox.type = "checkbox";
    checkBox.value = "";

    inputGroup.addEventListener("click", function (e) {
        if (e.target === checkBox) return;
        
        checkBox.checked = !checkBox.checked;
        if (checkBox.checked) {
            textInput.removeAttribute("disabled");
            inputGroup.classList.remove("input-group--disabled");
        } else {
            textInput.setAttribute("disabled", "");
            inputGroup.classList.add("input-group--disabled");
        }
        // console.log(groupData);
    });

    checkBoxContainer.appendChild(checkBox);
    inputGroup.appendChild(textInput);
    inputGroup.appendChild(checkBoxContainer);
    return inputGroup;
}

配套CSS #

.input-group {
    position: relative;
    width: fit-content;
}

.input-group--disabled::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    cursor: pointer;
}

方法2：用readonly模拟禁用状态 #

放弃使用disabled属性，改用readonly配合CSS样式模拟禁用效果，这样textInput仍能响应点击事件并冒泡到父容器。

修改后的代码 #

function newGroupMember(name) {
    let inputGroup = document.createElement("div");
    inputGroup.style.position = "relative";

    let checkBoxContainer = document.createElement("div");
    checkBoxContainer.style.position = "absolute";
    checkBoxContainer.style.right = "8px";
    checkBoxContainer.style.top = "50%";
    checkBoxContainer.style.transform = "translateY(-50%)";
    checkBoxContainer.style.zIndex = "10";

    let textInput = document.createElement("input");
    textInput.type = "text";
    textInput.value = name;
    textInput.setAttribute("readonly", "");
    textInput.classList.add("input--disabled");
    textInput.style.width = "100%";
    textInput.style.paddingRight = "30px";

    let checkBox = document.createElement("input");
    checkBox.type = "checkbox";
    checkBox.value = "";

    inputGroup.addEventListener("click", function () {
        checkBox.checked = !checkBox.checked;
        if (checkBox.checked) {
            textInput.classList.remove("input--disabled");
            textInput.removeAttribute("readonly");
        } else {
            textInput.classList.add("input--disabled");
            textInput.setAttribute("readonly", "");
        }
        // console.log(groupData);
    });

    checkBoxContainer.appendChild(checkBox);
    inputGroup.appendChild(textInput);
    inputGroup.appendChild(checkBoxContainer);
    return inputGroup;
}

配套CSS #

.input--disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    border-color: #ced4da;
}

额外优化点 #

• 移除复选框上重复的点击监听，避免逻辑冲突
• 调整复选框容器定位，确保它始终在输入框上层
• 给输入框添加右侧内边距，避免文本被复选框覆盖

内容的提问来源于stack exchange，提问作者Leonard Mohr