CODEWITHSUNDEEP
jquery
Joshua
Joshua

Reputation: 2295

styling text in a input type check box

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

I am using the above jquery code to disable the check box and line through the checkbox text. Checkbox disabling is working but the line through of the checkbox text is not working. How can I reach checkbox text and put a line through?

http://jsfiddle.net/yXVZM/

Upvotes: 2

Views: 710

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

You cannot style a text node, you need to wrap it with another element

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

Demo: Fiddle

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

The code is attempting to add the text-decoration property to the checkbox, instead of the label. Find the parent of the element that is of type label and apply the style.

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

Working Example http://jsfiddle.net/yXVZM/4/

Upvotes: 2

ZorleQ
ZorleQ

Reputation: 1427

In your code you are trying to cross out the checkbox value, and not the entire selector.

One way to achieve would be to use parent instead and cross out everything. But that would cross your image as well.

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

Alternatively, you can surround your text with a span, and cross out that.

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

And:

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

Upvotes: 1

Related Questions