title: How would I use a checkbox input to enable a text input when checked?
body: <p>I'm creating a chrome extension.</p>
  
  <p>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  &lt; hr >  for reading purposes.</p>
  
  <p>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.</p>
  
  <p>Here is what two groups in my extension currently look like: <a href="https://gyazo.com/a03948780b21d91713108fb88493f543" rel="nofollow noreferrer">https://gyazo.com/a03948780b21d91713108fb88493f543</a></p>
  
  <p>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.</p>
  
  <p>Here is the section of my popup.html that creates what you see in that gyazo image:</p>
  
  <pre><code>&lt;div class="marginforfieds"&gt;
     &lt;input type="checkbox" id="titlebox"&gt;
     &lt;label for="title"&gt;&lt;strong&gt;Title:&lt;/strong&gt;&lt;/label&gt;
     &lt;p&gt;&lt;/p&gt;
     &lt;input type="text" class="form-control" id="titletext" disabled&gt;
  &lt;/div&gt;
  &lt;div class="compilelines"&gt;
     &lt;hr&gt;
  &lt;/div&gt;
  &lt;div class="marginforfieds"&gt;
     &lt;input type="checkbox" id="descriptionbox"&gt;
     &lt;label for="description"&gt;&lt;strong&gt;Description:&lt;/strong&gt;&lt;/label&gt;
     &lt;p&gt;&lt;/p&gt;
     &lt;input type="text" class="form-control" id="descriptiontext" disabled&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The marginforfields class is simply applying a 5px margin to the group, so that the &lt; hr > extends slightly to it's left. The compile lines class is simply applying css to the &lt; hr >. The &lt; p >&lt; /p > is just there to create a little bit more space than would be created with &lt; br >.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I'm familiar with using javascript, as i've created multiple discord bots using it, and through creating all of this so far: "<a href="https://gyazo.com/0d0f65319beb640adeacea98d957dd94" rel="nofollow noreferrer">https://gyazo.com/0d0f65319beb640adeacea98d957dd94</a>" 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.</p>
  
  <p>Edit: 
  Somebody suggested this <a href="https://stackoverflow.com/questions/15140237/enabled-and-disabled-text-input-on-checkbox-checked-and-unchecked">enabled and disabled text input on checkbox checked and unchecked</a> may help.
  This is something that I have tried before and it hasn't worked.</p>
  
  <p>But I'm trying it again to show in case somebody can tell me what i'm doing wrong.</p>
  
  <pre><code>&lt;div class="marginforfieds"&gt;
     &lt;input type="checkbox" id="titlebox"&gt;
     &lt;label for="title"&gt;&lt;strong&gt;Title:&lt;/strong&gt;&lt;/label&gt;
     &lt;p&gt;&lt;/p&gt;
     &lt;input type="text" class="form-control" id="titletext" disabled&gt;
     &lt;script&gt;
        document.getElementById('titlebox').onchange = function() {
        document.getElementById('titletext').disabled = !this.checked;
        };
     &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code works when I view it online: <a href="https://gyazo.com/93eca416d58d2d19d5932dff634316e2" rel="nofollow noreferrer">https://gyazo.com/93eca416d58d2d19d5932dff634316e2</a></p>
  
  <p>However, using it for a chrome extension for some reason produces this error: <a href="https://gyazo.com/ed633133988e00481cfaa460a8cd0bf0" rel="nofollow noreferrer">https://gyazo.com/ed633133988e00481cfaa460a8cd0bf0</a></p>
  
  <p>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.</p>