Change colour of Label.BTN

Question

I am using bootstrap3 & fontawesome. I have the following HTML:

<label for="foo" class='radio btn'>
    <input type="radio" id='foo' name='foo[]'>
    <span></span>
    Foo
</label>

With the followign CSS:

label.radio {background: #e8e8e8;font-size: 25px;text-align: center;width: 100%;padding-top: 30px;padding-bottom: 30px;}
label.radio.active {background:#f00;}
label.radio > input {display: none;}
label.radio > input+span:after {font-family: FontAwesome;content:"\f00d";}
label.radio > input:checked+span:after {font-family: FontAwesome;content:"\f00c";}

However I want to change the background of the label when it's clicked. I can't see a way to do this with CSS, so I tried jQuery:

$("label.radio").click(function (evt) {
    $(this).toggleClass("active")
})

But the click() function fires twice.

How can I achieve this?

Nithya Rajan · Accepted Answer · 2019-03-01T14:03:08.450

1

You can use checkbox change event to change the color of the label.

<label for="foo" id="fooLabel" class='radio btn'>
    <input type="radio" id='foo' name='foo[]'>
    <span></span>
    Foo
</label>

$('#foo').change(function() {
     $('#fooLabel').toggleClass("active")        
});

edited Mar 01 '19 at 14:03

answered Mar 01 '19 at 13:58

Nithya Rajan

4,722
19
30

No sorry, this doesnt work. – Chud37 Mar 01 '19 at 14:00
I have updated my answer, check it – Nithya Rajan Mar 01 '19 at 14:03
Thanks, while I didn't actually go with this solution, the `.change()` on the radio actually was the key to me solving this. – Chud37 Mar 01 '19 at 14:32

Change colour of Label.BTN

1 Answers1