I'm facing an issue with a radio button in a large form that has some styling applied to it. The background color changes when hovered or checked, but there seems to be a conflict with an important JavaScript function in the rest of the form. It took me a while to realize that the problem stems from this function, and now I'm stuck on how to resolve it.
Here's the code snippet causing the conflict:
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
return false
});
obj_critere_form = new critere_form();
obj_critere_form.initialize();#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>