2

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/

4

3 回答 3

2

代码试图将text-decoration属性添加到复选框，而不是label. 找到属于 type 的元素的父元素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/

于 2013-07-23T08:39:10.837 回答
1

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

一种实现方法是改用 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"});
于 2013-07-23T08:38:32.410 回答
1

您无法设置文本节点的样式，您需要用另一个元素包装它

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'
}));

演示：小提琴

于 2013-07-23T08:41:41.957 回答