Question

36

Set checkbox label as bold when checked in Bootstrap 3

rated 0 times [ 38] [ 2] / answers: 1 / hits: 5177 / 9 Years ago, thu, june 11, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mercedez

Add To Favorites

Follow

Total Points: 525

Total Questions: 103

Total Answers: 102

Location: Trinidad and Tobago

Member since Fri, Mar 24, 2023

1 Year ago

answered 9 Years ago braeden · Accepted Answer

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