Search code examples
javascriptphpjquerycssdrupal-7

Styling label css using jquery

I have a radio group which is coming dynamically to my page. I was able to successfully disable any radio using php, but I want to add css property of text-decoration: line through on the disabled radio label. This is the code :

<div class="form-item form-type-radio form-item-example-pane-time-slot-1">
    <input type="radio" id="edit-example-pane-time-slot-1-11" name="example_pane[time_slot_1]" value="11" class="form-radio">
    <label class="option" for="edit-example-pane-time-slot-1-11">11 - 12 pm </label>
</div>

How is it possible using jquery ? My jquery code is this :

if ($('#edit-example-pane-time-slot-1-11').attr('disabled',true))
{
    $(this).css('text-decoration', 'line-through');
}

and its not working.

Solution

  • You can do this with just css

    CSS adjacent sibling selector

    CSS :disabled pseudo-class

    .form-radio:disabled + .option {
    text-decoration: line-through;
}

    FIDDLE