Clicking on label doesn't check radio button - html

Question

I'm trying to make a color picker by setting up html like this:
<ol class="kleurenkiezer list-reset clearfix">
<li>
<input type="radio" id="kleur_wit" name="kleurenkiezer" value="wit">
<label for="kleur_wit" style="background: white;"></label>
</li>
<li>
<input type="radio" id="kleur_creme" name="kleurenkiezer" value="creme">
<label for="kleur_creme" style="background: #fffceb;"></label>
</li>
<li>
<input type="radio" id="kleur_lichtbruin" name="kleurenkiezer" value="lichtbruin">
<label for="kleur_lichtbruin" style="background: #968272;"></label>
</li>
<li>
<input type="radio" id="kleur_bordeauxrood" name="kleurenkiezer" value="bordeauxrood">
<label for="kleur_bordeauxrood" style="background: #941514;"></label>
</li>
<li>
<input type="radio" id="kleur_oudgroen" name="kleurenkiezer" value="oudgroen">
<label for="kleur_oudgroen" style="background: #7fa298;"></label>
</li>
<li>
<input type="radio" id="kleur_lichtblauw" name="kleurenkiezer" value="lichtblauw">
<label for="kleur_lichtblauw" style="background: #487eae;"></label>
</li>
<li>
<input type="radio" id="kleur_oudgeel" name="kleurenkiezer" value="oudgeel">
<label for="kleur_oudgeel" style="background: #b79130;"></label>
</li>
<li>
<input type="radio" id="kleur_zwart" name="kleurenkiezer" value="zwart">
<label for="kleur_zwart" style="background: #000;"></label>
</li>
</ol>
What I'm trying to do is make the actual radio button invisible to the user and make the label clickable so that I have a neat list of colored squares that you can select one of. Now my radio button doesn't seem to get checked.. Why would that be?
My css:
.kleurenkiezer {
width: 165px;
margin-left: -10px;
float: right;
}
.kleurenkiezer li {
position: relative;
width: 45px;
height: 45px;
margin: 0 0 10px 10px;
border: 1px solid #bbbbbb;
float: left;
}
.kleurenkiezer li input {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
}
.kleurenkiezer li label {
position: absolute;
top: 0;
left: 0;
width: 43px;
height: 43px;
}

Answer 1

New answer for really old question.. :) Not sure it's your case, but I'm experimentind the same exact issue when clicking labels on a page where there are 2 duplicated forms, one of the 2 always hidden. One is used on a page area for mobile devices, the other for desktop devices.
The one appearing first on html flow is working properly, the other no. Fake example, see js fiddle:
<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>
<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>
https://jsfiddle.net/stratboy/8ua16gm3/1/
So for now, for me, the trick here is to find a way to avoid form duplication.

Answer 2

The radio button work for me.
You can set in css display:none for input checkbox:
.kleurenkiezer input[type=radio] {
display:none
}

Answer 3

For the same thing (a colorpicker) i used another approach and i think it's simpler. Just replace your form with a list of buttons and build 1 function where you pass the color. it's something like this:
<li class="color-box"><button type="button" class="color-btn" style="background-color:#BDC3C7;" onclick="wFontColour('#BDC3C7')"></button></li>
then in your function you do whatever you need to with that colour, in my case it looked like this:
function wFontColour(fontColour) {
document.execCommand("foreColor", false, fontColour);
};
if you want to keep your approach, give your label an id and try this:
$('#myLabel').each('click', function(){
$(this).closest('input:radio').attr('checked', 'checked');
});

Answer 4

Setting an attribute checked won't allow to re checked when you clicked once again. it will work for only once. Give following code a try
$(document).on('click','li label', function(){
$(this).closest('li').find('input:radio').trigger('click');
});

Answer 5

I experienced the same problem as #Luca (and possibly OP) using simple_form_for() in a mobile view and a desktop view. The mobile and desktop inputs had duplicate ids that were causing issues. I ended up using :namespace in the mobile view form:
<%= simple_form_for(:registration, namespace: "mobile") do |f| %>
The namespace generated ids that were unique and my radio buttons worked correctly after that.