I'm using a form-generator package and unfortunately it doesn't allow me to wrap the words "HDR Photography" in any tags. I'm too heavily invested in this package to abandon it.
I need to have this label bolded when the input box is checked though using jQuery or CSS.
The HTML shown below CANNOT be changed due to the form-generator package other than adding classes to the input
tag.
<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>
On a sidenote, why does Bootstrap 3 have the <input>
tag nested INSIDE the <label>
tag? It's not a label! It doesn't make any semantic sense.
Try like this: 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>
Update : Demo
If you cant change the order, you can use span instead like this:
.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>
You can fix it with 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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.