Enable clicking on parent element when child is disabled

I have an element inputGroup composed of two parts: a text input and a checkbox.
I am trying to enable it so that clicking on the any part of the inputGroup will check the checkbox.

I have it so that when the checkbox is unchecked textInput is disabled. This makes it so that I am unable to click on the part of the inputGroup composed of the textInput. I have tried changing the z-index to no avail.

How can I make it so that clicking on the disabled textInput part of inputGroup will cause the click event to be recorded?

Here is a JSFiddle link.

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

    let checkBoxContainer = document.createElement("div");

    let textInput = document.createElement("input");
    textInput.type = "text";
    textInput.value = name;
    textInput.setAttribute("readonly", "");
    textInput.setAttribute("disabled", "");

    inputGroup.style.position = "relative";
    inputGroup.style.zIndex = "4";
    textInput.style.zIndex = "0";
    textInput.style.position="relative";
    checkBoxContainer.style.zIndex = "3";

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

    inputGroup.addEventListener("click", function () {
        if (checkBox.checked) {
            checkBox.checked = false;
            textInput.setAttribute("disabled", "");
            
        } else {
            checkBox.checked = true;
            textInput.removeAttribute("disabled");
           
        }
        console.log(groupData);
    });

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

    checkBoxContainer.appendChild(checkBox);

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

>Solution :

Smack a pointer-event: none on that disabled input, and it won’t register any clicks, and the click will target the group instead.

/* CSS */
input[disabled] {
  pointer-events: none;
}