在Javascript中更改复选框标签
在Javascript中更改复选框标签
提问于 2015-09-23 18:56:39
我正在尝试更改Javascript中的复选框标签。站点是Wordpress，表单是一个插件，所以我必须使用一个代码片段插件来定位复选框。
简而言之，当会话已满时，复选框需要灰显，标签文本以红色突出显示。
下面是我使用的代码：
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>
盒子变灰不是问题，但我不能改变标签的字体颜色。有人知道这个问题可能是什么吗？
回答 4
Stack Overflow用户
发布于 2015-09-23 19:06:29
要做到这一点，唯一的方法是更改标记，因为文本不是复选框的一部分。您所需要做的就是在复选框及其相应文本周围添加标签，并使用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。
Stack Overflow用户
发布于 2015-09-23 19:05:40
这是因为样式仅用于输入。目前，我已经为文本添加了一个标签。
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
Stack Overflow用户
发布于 2015-09-23 19:06:23
例如，将文本环绕在<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32737718
复制相关文章
相似问题
腾讯云开发者
