Question

我正在使用表单生成器包，不幸的是它不允许我在任何标签中包含“HDR Photography”字样。我投入太多资金来放弃它。

我需要在使用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>

Answer 2

您可以使用jQuery修复它：

$(".label-to-bold-if-checked").click( function(){
    var _parent = $(this).parent('label');
    $(this).is(':checked') ? _parent.addClass('selected') : _parent.removeClass('selected');
});


function updateLabels (targetedClass) {
    $(arguments[0]).each(function(){
        var _parent = $(this).parent('label');
        $(this).is(':checked') ? _parent.addClass('selected') : '';
    });
}
updateLabels('.label-to-bold-if-checked');

CSS：

label.selected{ font-weight:bold; }

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

2 个答案: