Как бы я использовал флажок ввода, чтобы включить текстовый ввод, когда отмечен?

Question

Я создаю расширение chrome.

Моя цель для этого заключается в том, чтобы я мог иметь список ввода текста с флажками для каждого из них. Первоначально все текстовые вводы отключены, а все флажки не проверены. У меня также есть ярлык в каждой из групп, говорящий, для чего предназначен ввод текста. Всякий раз, когда я говорю «группа», я говорю об определенном c трио метки, вводе флажка и вводе текста. Каждая группа разделена на

---

для целей чтения.

Я хотел бы, чтобы при установке флажка для ввода для каждой группы был включен текстовый ввод для этой группы.

Вот как в настоящее время выглядят две группы в моем расширении: https://gyazo.com/a03948780b21d91713108fb88493f543

Как видите, ввод текста для титульной группы в настоящее время отключен, и флажок установлен бесконтрольно. То же самое относится и к группе описания. Как упоминалось ранее, цель состоит в том, чтобы при нажатии на флажок ввода для одной из этих групп, он включил ввод текста для указанной группы.

Вот раздел моего всплывающего окна. html, который создает то, что вы видите на этом изображении gyazo:

<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>

Класс marginforfields просто применяет к группе маржу в 5px, так что

---

немного расширяется влево. Класс строк компиляции просто применяет css к

---

.

просто для того, чтобы создать немного больше места, чем было бы создано с помощью
.

Идентификатор для ввода флажка отформатирован как «x + box», так что x происходит от 'label for = "x"', то же самое относится и к вводу текста, идентификатор которого отформатирован как "x + text", так что x снова происходит от 'label for = "x"' Этот шаблон одинаков для всех groups.

Моя проблема в том, что, поскольку я так новичок в chrome расширениях, я не уверен, как бы я написал popup. js и интегрировал бы его в popup. html, чтобы флажок был Если флажок установлен, то поле ввода текста будет включено.

Я знаком с использованием javascript, поскольку с его помощью я создал несколько несогласованных ботов и до сих пор создавал все это: "https://gyazo.com/0d0f65319beb640adeacea98d957dd94 "в моем chrome расширении, я знакомлюсь с html, но так как это мое первое расширение chrome, у меня много проблем с написанием всплывающего окна. js и интеграцией этого в всплывающее окно. html. Я изучил ответы на многие похожие вопросы, но ни один из них не помог мне, поэтому я просто не понимаю, как заставить это работать. Кроме того, нужно ли что-то добавить к манифесту. json, если вы используете всплывающее окно. js? Я прошу прощения за такой длинный вопрос, но я пытаюсь дать как можно больше подробностей, если вам нужна дополнительная информация, просто дайте мне знать, и я буду готов дать ее! Огромное спасибо за любые советы, которые вы можете дать.

Редактировать: Кто-то предлагал, чтобы включил и отключил ввод текста при установленном флажке и не отмечен может помочь. Это то, что я пробовал раньше, и это не сработало.

Но я пытаюсь это снова показать, если кто-то может сказать мне, что я делаю неправильно.

<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>

Этот код работает, когда я просматриваю его онлайн: https://gyazo.com/93eca416d58d2d19d5932dff634316e2

Однако использование его для расширения chrome по некоторым причинам приводит к этой ошибке: https://gyazo.com/ed633133988e00481cfaa460a8cd0bf0

Кажется, существует проблема с наличием встроенных сценариев в расширении chrome. Если это проблема, я понятия не имею, как это исправить или вообще заставить это работать.

Answer 1

Вы можете создать функцию, которая включает текстовое поле, которое находится в том же родительском элементе, что и соответствующий ему флажок. Затем добавьте прослушиватель событий click к каждому элементу ввода флажка, чтобы он вызывал эту функцию при нажатии / проверке:

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>

Answer 2

Хорошо, я разобрался с решением.

Со всем, что я пробовал, я поместил свой скрипт в строку с html, но по некоторым причинам, chrome extensions don ' не могу принять это.

Чтобы решить эту проблему, я создал отдельный всплывающий файл. js со сценарием, а затем сделал это в файле html.

Так что новый раздел кода html будет быть:

<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>

и всплывающее окно. js будет:

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

Теперь у нас есть: https://gyazo.com/585f792ba3212fd4e7ddae5f352b192d