更改 Javascript 中的复选框标签答案

【问题标题】：Changing a checkbox label in Javascript更改 Javascript 中的复选框标签
【发布时间】：2015-09-24 22:18:11
【问题描述】：

我正在尝试更改 Javascript 中的复选框标签。网站是 Wordpress，表单是插件，所以我必须使用 sn-p 插件来定位复选框。

简而言之，当会话已满时，复选框需要变灰，标签文本以红色突出显示。

这是我正在使用的代码：

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>

框变灰不是问题，但我无法更改标签的字体颜色。有谁知道可能是什么问题？

【问题讨论】：

您可以使用检查元素更改字体颜色吗？如果不是，那么可能是 css 阻止了这种情况的发生。
您尝试渲染的文本不是<input> 的一部分，所以简而言之，您必须使用不同的标记..
首先，将“标签”放在<label> 元素中，并将其链接到您的复选框。为了可用性，复选框应该可以通过单击其标签来选择。

标签： javascript html wordpress checkbox

【解决方案1】：

您可以这样做的唯一方法是更改您的标记，因为文本不是复选框的一部分。只需在复选框及其各自文本周围添加标签，并用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。

【讨论】：

这是有效的完整答案
这似乎是唯一影响文本元素颜色的方法。不幸的是，它改变了组内所有复选框的“标签”，即使特定代码归属于每个单独的元素。有没有办法针对每个特定的“标签”？

【解决方案2】：

这是因为 Style 仅适用于 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>

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

【讨论】：

我建议使用<label> 而不是<span>
一个标签应该包含输入或者有一个 for 属性
Darren 好主意，但恐怕在这里行不通：o(

【解决方案3】：

例如，将您的文本包裹在 <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>

【讨论】：

我建议使用<label> 而不是<span>
是的。无论如何，@Popnoodles 的答案要好得多，因为在标签内嵌入输入是 W3 有效的。

【解决方案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/

我建议您通过将标签包装在 spans 或 labels 中来准备 DOM（以匹配替换模式），然后在对其进行一些调整后运行此函数。

【讨论】：