Как сделать кастомный checkbox перед input[type="text"] через JS?

Question

[Platon Goldenberg]

Есть подготовленная структура HTML на bootstrap разметке и возможность встраивать свои CSS и JavaScript. В первую очередь необходимо было изменить визуально checkbox, для чего я убрал из вида стандартные, заменив их своими. Среди них также есть поле input[type="text"], уже связанное логически с checkbox. Необходимо прикрутить новый checkbox так, чтобы он отрабатывал при заполнении текстового поля.

Доступа к редактированию встроенного JS также нет.
https://jsfiddle.net/rka4mwpy/1/

Answer 1

[MikUrrey]

Если правильно понял вопрос, то

.form-check-other {
    position: relative;
 }
 .form-check-other .form-check-label{
   position: absolute!important;
   left: 0;
 }

https://jsfiddle.net/b2vdsk76/

Comments

[Platon Goldenberg]

Хорошее решение, но тут Вы добавили в HTML

<label class="form-check-label" for="entry.941106590.other_option_response"></label>

Если бы можно было через JS инициировать выполнение данного участка HTML, то было бы просто супер.

[MikUrrey]

Platon Goldenberg, так добавьте этот же label перед input text с помощью createElement. Это, пожалуй, самый простой путь стилизовать чекбокс без вмешательства в HTML

[Platon Goldenberg]

MikUrrey, правильно, только перед этим надо спарсить, сохранить в переменную и динамически подставить в createElement все значения name="entry.941106590.other_option_response"

Это обусловлено тем, что опросник состоит из множества таких вот вопросов, в каждом из которых свой идентификатор other_option_response

У меня это пока не выходит. Ваши подсказки бесценны.

[MikUrrey]

Platon Goldenberg, думаю, можно попробовать так:

document.addEventListener("DOMContentLoaded", function() {
  let checkboxes = document.querySelectorAll('.form-check>.form-check-input');
  [].forEach.call(checkboxes, function (checkbox) {
    let label = document.createElement('LABEL');
    label.for = checkbox.id;
    label.className = "form-check-label";
    checkbox.after(label);
  });
});

кроме .form-check>.form-check-input есть разные способы добраться до искомых чекбоксов, например input[id$=".other_option_response"] или input[value="__other_option__"]

[Platon Goldenberg]

MikUrrey, к сожалению, данные варианты не решают мою проблему. Дело в том, что когда значение в текстовом поле становится пустым (будучи тект удален), то галка так и остается на месте. Решение у Вас, кончено, изобретательное.

[MikUrrey]

Platon Goldenberg, с этим - вообще всё просто:

<input class="form-control" type="text" name="entry.941106590.other_option_response" value="" placeholder="Иное" oninput="document.getElementById(this.name).checked = this.value?true:false">

[Platon Goldenberg]

MikUrrey, спасибо большое. Очень здорово помогли!

Благодаря Вашим подсказкам получилось следующее:
https://jsfiddle.net/rka4mwpy/2/

[MikUrrey]

Platon Goldenberg, https://jsfiddle.net/1dr5m7cy/
немного подправил скрипт - по-моему, он не работал))
Смотрите, там, во-первых, otherOption вы прописали прямо как часть строки, так в JS не работает. Во-вторых, не работают обработчики событий, назначенные как $(selector).attr(), для этого есть $(selector).on(). А чтобы не срабатывал старый обработчик, его нужно отключить - $(selector).off(). Ну и чтобы срабатывало непосредственно во время набора, лучше использовать событие input

[Platon Goldenberg]

MikUrrey, я пробую убрать курсор с пустого поля, а галочка остается на своем месте. Подсказка классная, но идеальный вариант не найден, т.е. когда нажатие на чекбокс вызывает работу поля, а пустое поле обнуляет значение в чекбоксе. Помогите мне сделать так...

[MikUrrey]

Platon Goldenberg, тогда надо еще повесить то же самое действие на blur - это как раз событие "убрать курсор с поля".
https://jsfiddle.net/ux8nkmoz/

Только вот вопрос: вам надо, чтобы вы не могли управлять чекбоксом вручную? Ведь при таком раскладе уже не сможете.

[Platon Goldenberg]

MikUrrey, логика у меня такая, что пустое поле - не засчитывается как ответ в тесте. Пользователь жмет на чекбокс, а попадает на активное поле для ввода. Если в поле появляются какие-то символы, то чекбокс помечается. Символы затирает - чекбокс отключается.

[Platon Goldenberg]

MikUrrey, последний предложенный Вами вариант вполне прекрасен.

[MikUrrey]

Platon Goldenberg, вот и славно, рад, что помог :)