Question

HTML

<label>
  <img data-disable-checkbox="true">
  <input type="checkbox" />
  This checkbox value
</label>

JQuery的

$("img[data-disable-checkbox='true']")
  .next()
  .prop("disabled", "disabled")
  .css({"text-decoration":"line-through"});

我使用上面的jquery代码来禁用复选框并在复选框文本中行。复选框禁用正在运行，但复选框文本的行无效。如何到达复选框文本并插入一行？

http://jsfiddle.net/yXVZM/

Answer 1

代码正在尝试将text-decoration属性添加到复选框，而不是label。找到类型为label的元素的父级并应用样式。

$("img[data-disable-checkbox='true']").next().prop("disabled", "disabled");
$("img[data-disable-checkbox='true']").parent("label")
                                    .css({"text-decoration":"line-through"});

工作示例 http://jsfiddle.net/yXVZM/4/

Answer 2

在您的代码中，您试图勾选复选框值，而不是整个选择器。

实现的一种方式将是使用parent而不是交叉所有内容。但这也会影响你的形象。

$("img[data-disable-checkbox='true']").next().prop("disabled", "disabled")
    .parent()
    .css({"text-decoration":"line-through"});

或者，您可以使用范围包围文本，然后将其划掉。

<label>
    <img data-disable-checkbox="true">
    <input type="checkbox" />
    <span>
        This checkbox value
    </span>
</label>

和

$("img[data-disable-checkbox='true']")
    .next().prop("disabled", "disabled")
    .next()
    .css({"text-decoration":"line-through"});

Answer 3

您无法设置文本节点的样式，您需要使用其他元素

包装它

var img = $("img[data-disable-checkbox='true']");
img.next().prop("disabled", true);
img.parent().contents().filter(function(){
    return this.nodeType == 3 && $.trim($(this).text());
}).wrap($('<span />', {
    style: 'text-decoration: line-through'
}));

演示：Fiddle

在输入类型复选框中设置样式文本

3 个答案: