在Javascript中更改複選框標籤

Question

我試圖更改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>

箱子的老齡化是沒有問題的，但我不能改變標籤的字體顏色。有誰知道這個問題可能是什麼？

Answer 1

這是因爲樣式只適用於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> 

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

Answer 2

裹<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> 

Answer 3

要做到這一點，唯一的方法是更改​​標記，因爲文本不是複選框的一部分。您只需在複選框及其相應文本週圍添加標籤，然後使用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。

Answer 4

我不知道我有任何訪問shortcodes的膽量。

您唯一的解決方法是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/

我建議你準備你的DOM（以匹配通過將標籤包裝在span s或label s中，然後在對其進行一些調整之後運行此func來替換圖案）。