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

您可以执行此操作的唯一方法是更改标记，因为文本不是复选框的一部分。您需要做的就是在复选框及其各自的文本周围添加标签，并使用JS遍历到正确的标签。

无论如何，您的复选框应该有def Physics(): for k, v in enumerate(ENTITIES): vel = ENTITIES[k].GetVelocity() pos = ENTITIES[k].GetPos() vel[1] = vel[1] + 0.1 ENTITIES[k].Entity.move_ip(vel)，这样当点击文本时，它会触发其复选框。

您可以使用<label>

定位标签

＆＃13;

parentNode

＆＃13;

var mon1 = document.getElementById('Mondays_7_1_1');
mon1.disabled = true;
mon1.parentNode.style.color = "red";

＆＃13;

N.B。如果您打算在复选框更改时触发，请使用<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。

Answer 2

这是因为Style仅适用于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 3

例如，将文字换成notification: { title: "Hello, World", body: "This is a notification that will be displayed ASAP.", icon: "@drawable/ic_launcher" }，因为它不是输入的一部分。

<span>

Answer 4

我不知道我可以访问短代码的内容。

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

我建议您通过将标签包装在span或label内来准备DOM（以匹配替换模式），然后在对其进行一些调整后运行此函数。

在Javascript中更改复选框标签

4 个答案: