html - Changing a checkbox label in Javascript - Stack Overflow

admin管理员组

文章数量:1336643

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?

• javascript
• html
• wordpress
• checkbox

Share Follow edited Sep 23, 2015 at 11:01 Popnoodles 28.4k33 gold badges4848 silver badges5555 bronze badges asked Sep 23, 2015 at 10:56 RalphatronRalphatron 6311 silver badge88 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

The 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 spans or labels and then run this func after some tweaking is done to it.

本文标签： htmlChanging a checkbox label in JavascriptStack Overflow