How would I use a checkbox input to enable a text input when checked?

Question

I'm creating a chrome extension.

My goal for this is that I will be able to have a list of text inputs with check-box inputs for each of them. Initially, all text inputs are disabled, and all checkbox inputs are unchecked. I also have a label within each of the groups saying what the text input is for. Whenever I say group, i'm talking about a specific trio of a label, a checkbox input, and a text input. Each group is divided by an < hr > for reading purposes.

What i would like to happen is that when you check the box input for each group, the text input for that group will be enabled.

Here is what two groups in my extension currently look like: https://gyazo.com/a03948780b21d91713108fb88493f543

As you can see, the text input for the title group is currently disabled, and the checkbox is unchecked. The same applies for the description group. As mentioned previously, the goal is that when you click the checkbox input for one of these groups, it will enabled the text input for said group.

Here is the section of my popup.html that creates what you see in that gyazo image:

<div class="marginforfieds">
   <input type="checkbox" id="titlebox">
   <label for="title"><strong>Title:</strong></label>
   <p></p>
   <input type="text" class="form-control" id="titletext" disabled>
</div>
<div class="compilelines">
   <hr>
</div>
<div class="marginforfieds">
   <input type="checkbox" id="descriptionbox">
   <label for="description"><strong>Description:</strong></label>
   <p></p>
   <input type="text" class="form-control" id="descriptiontext" disabled>
</div>

The marginforfields class is simply applying a 5px margin to the group, so that the < hr > extends slightly to it's left. The compile lines class is simply applying css to the < hr >. The < p >< /p > is just there to create a little bit more space than would be created with < br >.

The id for the checkbox input is formatted as "x+box" such that x comes from 'label for="x"', the same applies for the text input, who's id is formatted as "x+text" such that x again comes from 'label for="x"' This pattern is the same for all groups.

My issue is that since i am so new to chrome extensions, I am not sure how i would write popup.js and integrate it into popup.html so that the checkbox being checked would enable the text input field.

I'm familiar with using javascript, as i've created multiple discord bots using it, and through creating all of this so far: "https://gyazo.com/0d0f65319beb640adeacea98d957dd94" in my chrome extension, i'm gaining familiarity with html, but since this is my first chrome extension, I am having a lot of trouble writing popup.js and integrating that into popup.html. I have looked into the answers to a lot of people similar questions, but none have worked for me, so i just have no understanding of how i can get this to work. Also, do you have to add something to manifest.json if you're using a popup.js? I'm sorry for such a long question, but i'm trying to give as much detail as possible, if you need more information, just let me know and i'll be willing to give it! Thank you so much for whatever advisement you can provide.

Edit: Somebody suggested this enabled and disabled text input on checkbox checked and unchecked may help. This is something that I have tried before and it hasn't worked.

But I'm trying it again to show in case somebody can tell me what i'm doing wrong.

<div class="marginforfieds">
   <input type="checkbox" id="titlebox">
   <label for="title"><strong>Title:</strong></label>
   <p></p>
   <input type="text" class="form-control" id="titletext" disabled>
   <script>
      document.getElementById('titlebox').onchange = function() {
      document.getElementById('titletext').disabled = !this.checked;
      };
   </script>
</div>

This code works when I view it online: https://gyazo.com/93eca416d58d2d19d5932dff634316e2

However, using it for a chrome extension for some reason produces this error: https://gyazo.com/ed633133988e00481cfaa460a8cd0bf0

It seems that there is an issue with having inline scripts in a chrome extension. If this is the issue, I have no idea how to fix it or actually make this work.

Lonnie Best · Answer 1 · 2020-02-17T21:39:40.003

You can create a function that enables the textbox that's in the same parent element as its respective checkbox. Then, add an click event listener to each checkbox input element so that it will call that function upon being clicked/checked:

function enableNextTextBox()
{
  let textBox = [... this.parentNode.querySelectorAll('[type="text"]')][0];
  if (textBox)
  {
    if (this.checked)
    {
      textBox.removeAttribute("disabled");
    }
    else
    {
      textBox.setAttribute("disabled", "");
    }
  }
}

let checkboxes =  [... document.querySelectorAll('[type="checkbox"]')];

checkboxes.forEach(function (checkbox)
{
  checkbox.addEventListener('click', enableNextTextBox);
});

<div class="marginforfieds">
   <input type="checkbox" id="titlebox">
   <label for="title"><strong>Title:</strong></label>
   <p></p>
   <input type="text" class="form-control" id="titletext" disabled>
</div>
<div class="compilelines">
   <hr>
</div>
<div class="marginforfieds">
   <input type="checkbox" id="descriptionbox">
   <label for="description"><strong>Description:</strong></label>
   <p></p>
   <input type="text" class="form-control" id="descriptiontext" disabled>
</div>

score 0 · Accepted Answer · answered Feb 09 '20 at 22:16

Okay I've figured out the solution.

With everything I've tried, I've been placing my script inline with the html, but for some reason, chrome extensions don't accept this.

To solve, i created a separate popup.js file with the script, and then did in the html file.

So the new section of the html code would be:

<div class="marginforfieds">
   <input type="checkbox" id="titlebox">
   <label for="title"><strong>Title:</strong></label>
   <p></p>
   <input type="text" class="form-control" id="titletext" disabled>
   <script src="popup.js"></script>
</div>

And popup.js would be:

document.getElementById('titlebox').onchange = function() {
document.getElementById('titletext').disabled = !this.checked;
};

Now we have: https://gyazo.com/585f792ba3212fd4e7ddae5f352b192d

How would I use a checkbox input to enable a text input when checked?

2 Answers2