admin管理员组文章数量:1334887
I'm trying to change a checkbox label in Javascript. The site is Wordpress and the form is a plug in, so I have to use a snippet plug in to target the checkboxes.
In brief, when a session is full, the checkbox needs to be greyed out and the label text highlighted in red.
Here's the code I'm using:
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>
I'm trying to change a checkbox label in Javascript. The site is Wordpress and the form is a plug in, so I have to use a snippet plug in to target the checkboxes.
In brief, when a session is full, the checkbox needs to be greyed out and the label text highlighted in red.
Here's the code I'm using:
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>
The greying of the box isn't a problem, but I can't change the font colour of the label. Does anyone know what the issue might be?
Share edited Sep 23, 2015 at 11:01 Popnoodles 28.4k3 gold badges48 silver badges55 bronze badges asked Sep 23, 2015 at 10:56 RalphatronRalphatron 631 silver badge8 bronze badges 3- are you able to change the font color using inspect element ? If no, then probably the css is preventing that from happening. – itssajan Commented Sep 23, 2015 at 10:59
-
2
the text that you are trying to render is not part of the
<input>
so in short you'll have to use a different markup.. – Lipis Commented Sep 23, 2015 at 11:01 -
To begin with, put the "label" in a
<label>
element, and link it to your checkbox. For usability, the checkbox should be selectable by clicking on its label. – Andrea Casaccia Commented Sep 23, 2015 at 11:05
4 Answers
Reset to default 3The only way you can do this is to change your markup as the text isn't part of the checkbox. All you need to do is add labels around the checkboxes and their respective texts, and traverse to the correct label with JS.
Your checkboxes should have <label>
s anyway, so that when the text is clicked it triggers its checkbox.
You can target the label using 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 />
N.B. If you intend to trigger on the checkbox change, use change
/onChange
not click
/onClick
.
This is because the Style was only for the INPUT. I have added a label to the text for the moment.
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
Wrap your text around a <span>
for example, because it is not a part of the input.
<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>
I'm unaware that I have any access to the guts of the shortcodes.
Your only workaround then afaik is DOM manipulation. Something in the taste of :
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 !
This will work for 1 disable, because the function doesn't take into account the new modified DOM ;) http://jsfiddle/sskqtL9x/4/
I suggest you prepare your DOM (to match the replace pattern) by wrapping your labels inside span
s or label
s and then run this func after some tweaking is done to it.
本文标签: htmlChanging a checkbox label in JavascriptStack Overflow
版权声明:本文标题:html - Changing a checkbox label in Javascript - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742262454a2442767.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论