添加删除线以选中复选框

Question

当我在表单中选择一个复选框时,我试图添加删除线(Bootstrap v3).我编写了这个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>

并在CSS中添加了一个类

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

但它不起作用..

Answer 1

这是一个在检查输入时进行检查的解决方案:

HTML:

<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" value="1"/>
             <label class="strikethrough">sssssssss</label>
        </div>
     </div>
</div>

CSS

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

的jsfiddle

使用此解决方案时,如果选中复选框,它将对标签执行某些操作.如果你愿意,你可以把它变成粗体或改变它的颜色.

Answer 2

问题是您正在尝试应用line-through复选框,因为文本在标签内.你可以将文本包装在一个<span>并改变它的CSS:checked

<div class="checkbox">
   <label>
      <input type="checkbox" name="packersOff" class="strikethrough" value="1">
      <span>sssssssss</span>
   </label>
</div>




.strikethrough:checked + span{
  text-decoration:line-through
}

Bootply