CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
fuzzybabybunny
fuzzybabybunny

Reputation: 5254

Set checkbox label as bold when checked in Bootstrap 3

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.

Upvotes: 1

Views: 5648

Answers (2)

n1kkou
n1kkou

Reputation: 3142

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; }

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

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>

Upvotes: 2

Related Questions