Changing a checkbox label in Javascript

4 comments

1. 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.

2. 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

3. 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>
   

4. 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.net/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.

Comments are closed.