Изменение метки флажка в Javascript

Question

Я пытаюсь изменить метку в ящике. Сайт Wordpress, и форма является подключаемым модулем, поэтому я должен использовать подключаемый модуль snippet для установки флажков.

Вкратце, когда сессия заполнена, флажок должен быть выделен серым цветом, а текст ярлыка выделен красным.

Вот код, я использую:

var mon1 = document.getElementById('Mondays_7_1_1'); 
 
mon1.disabled = true; 
 
mon1.style.color = "red";

<div> 
 
<input class="" type="checkbox" name="Mondays[]" value="5.00-6.00pm: 4-6 year olds FULL" id="Mondays_7_1_1" /> 5.00-6.00pm: 4-6 year olds FULL<br> 
 
<input class="" type="checkbox" name="Mondays[]" value="6.00-7.00pm: 7-9 year olds" id="Mondays_7_1_2" /> 6.00-7.00pm: 7-9 year olds<br> 
 
<input class="" type="checkbox" name="Mondays[]" value="7.00-8.00pm: 10-14 year olds FULL" id="Mondays_7_1_3" /> 7.00-8.00pm: 10-14 year olds FULL 
 
</div> 
 
<div style="font-weight: normal;color:red;" id="checkbox_Mondays_7_1"></div>

Старение коробки не проблема, но я не могу изменить цвет шрифта метки. Кто-нибудь знает, в чем проблема?

Answer 1

Это потому, что стиль был только для INPUT. Я добавил к тексту наклейку.

HTML

<div> 
    <input class="" type="checkbox" name="Mondays[]" value="5.00-6.00pm: 4-6 year olds FULL" id="Mondays_7_1_1" /><label id="Mondays_7_1_1-text">5.00-6.00pm: 4-6 year olds FULL</label><br> 
    <input class="" type="checkbox" name="Mondays[]" value="6.00-7.00pm: 7-9 year olds" id="Mondays_7_1_2" /> 6.00-7.00pm: 7-9 year olds<br> 
    <input class="" type="checkbox" name="Mondays[]" value="7.00-8.00pm: 10-14 year olds FULL" id="Mondays_7_1_3" /> 7.00-8.00pm: 10-14 year olds FULL 
</div> 
<div style="font-weight: normal;color:red;" id="checkbox_Mondays_7_1"></div> 

JS

var mon1 = document.getElementById('Mondays_7_1_1'); 
mon1.disabled = true; 
var mon1Text = document.getElementById('Mondays_7_1_1-text'); 
mon1Text.style.color = "red"; 

JSFiddle

Answer 2

Оберните текст вокруг <span>, например, потому что он не является частью входных данных.

<div><input class="" type="checkbox" name="Mondays[]" value="5.00-6.00pm: 4-6 year olds FULL" id="Mondays_7_1_1" /> 
<span name="Mondays_7_1_1">5.00-6.00pm: 4-6 year olds FULL</span> 
... 

<script> 
var monSpan = document.getElementsByName('Mondays_7_1_1')[0]; 
monSpan.style.color = "red";</script> 

Answer 3

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

В любом случае ваши флажки должны иметь <label> s, так что при щелчке по тексту он запускает свой флажок.

Вы можете настроить таргетинг на этикетку с помощью parentNode

var mon1 = document.getElementById('Mondays_7_1_1'); 
 
mon1.disabled = true; 
 
mon1.parentNode.style.color = "red";

<label> 
 
    <input class="" type="checkbox" name="Mondays[]" value="5.00-6.00pm: 4-6 year olds FULL" id="Mondays_7_1_1" /> 
 
    5.00-6.00pm: 4-6 year olds FULL 
 
</label> 
 
<br /> 
 
<label> 
 
    <input class="" type="checkbox" name="Mondays[]" value="6.00-7.00pm: 7-9 year olds" id="Mondays_7_1_2" /> 
 
    6.00-7.00pm: 7-9 year olds 
 
</label> 
 
<br /> 
 
<label> 
 
    <input class="" type="checkbox" name="Mondays[]" value="7.00-8.00pm: 10-14 year olds FULL" id="Mondays_7_1_3" /> 
 
    7.00-8.00pm: 10-14 year olds FULL 
 
</label> 
 
<br />

нотабене Если вы собираетесь запускать при изменении флажка, используйте change/onChange не click/onClick.

Answer 4

Я не знаю, что у меня есть доступ к кишкам коротких кодов.

Ваше единственное обходное решение тогда afaik - манипуляция DOM. Что-то во вкусе:

var disableFunc = function (id, index) { 

    var childNodes = document.getElementById(id).parentNode.childNodes; 
    var texts = Array(); 
    var textIndices = Array(); 
    for (var i = 0; i < childNodes.length; i++) { 
     if (childNodes[i].nodeType == 3 && childNodes[i].nodeValue.trim() != "") { 
      texts.push(childNodes[i].nodeValue); 
      textIndices.push(i); 
     } 
    } 

    var mon1 = document.getElementById(id); 
    mon1.disabled = true; 
    var span = document.createElement('span'); 
    span.innerHTML = texts[index - 1]; 
    span.style.color = 'red'; 
    mon1.parentNode.removeChild(childNodes[textIndices[index - 1]]); 
    mon1.parentNode.insertBefore(span, childNodes[textIndices[index - 1]]); 
} 

disableFunc('Mondays_7_1_1', 1); 
//disableFunc('Mondays_7_1_2', 2); //!\ doesn't work ! 
//disableFunc('Mondays_7_1_3', 3); //!\ doesn't work ! 

Это будет работать на 1 Отключение, потому что функция не принимает во внимание новый измененного DOM;) http://jsfiddle.net/sskqtL9x/4/

Я предлагаю вам подготовить DOM (чтобы соответствовать замените шаблон), обернув ваши метки внутри span s или label s, а затем запустите эту функцию после некоторой настройки.