javascript - 在 Bootstrap 3 中选中时将复选框标签设置为粗体

Question

我正在使用一个表单生成器包，不幸的是它不允许我在任何标签中包含“HDR 摄影”一词。我对这个软件包投入太多而无法放弃它。

我需要在使用 jQuery 或 CSS 选中输入框时将此标签加粗。

除了向 input 添加类之外，由于表单生成器包的原因，下面显示的 HTML 无法更改。标签。

  <div class="checkbox">
    <label>
      <input type="checkbox" value="true" class="track-order-change label-to-bold-if-checked" name="servicesSelected.hdrPhotos.selected">
      HDR Photography
    </label>
  </div>

旁注，为什么 Bootstrap 3 有 <input>标签嵌套在 <label> 内标签？这不是标签!它没有任何语义意义。

Answer 1

像这样尝试: Demo

.label-to-bold-if-checked:checked + .label-check {
  font-weight: bold;
}

HTML:

 <div class="checkbox">

     <input type="checkbox" value="true" class="track-order-change label-to-bold-if-checked" name="servicesSelected.hdrPhotos.selected"/>
     <label class="label-check">  HDR Photography
    </label>
  </div>

更新: Demo

如果你不能改变顺序，你可以像这样使用span:

.label-to-bold-if-checked:checked + span {
  font-weight: bold;
}

HTML:

  <label class="label-check">  
     <input type="checkbox" value="true" 
      class="track-order-change label-to-bold-if-checked" 
      name="servicesSelected.hdrPhotos.selected"/>
            <span>  HDR Photography</span>
    </label>