Add strikethrough to checked checkbox

Question

I am trying to add strikethrough when i select a checkbox in my form (Bootstrap v3). I coded this bootply:

<div class="form-group ">
    <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
        <div class="checkbox">
             <label><input type="checkbox" name="packersOff" class="strikethrough" value="1">sssssssss</label>
        </div>
     </div>
</div>

and added a class in css

.strikethrough:checked{
  text-decoration:line-through;
}

but it doesn't work..

Answer 1

Here is a solution to put a strike through when your input is checked:

input[type=checkbox]:checked + label.strikethrough{
  text-decoration: line-through;
}

<div class="form-group ">
    <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
        <div class="checkbox">
            <input type="checkbox" name="packersOff" id="packers" value="1"/>
            <label for="packers" class="strikethrough">sssssssss</label>
        </div>
     </div>
</div>

JSFIDDLE

With this solution when ever the checkbox is checked it will do something to the label. so you could make it bold or change its colour if you wanted.