Q:

JS function conflicting with CSS style

I have a radio button part into a large form which is styled in a way that when it's hovered or checked, it has a different background color. Though, I have an important js function for the rest of the form which keeps the style from working. It took me time to understand that the conflict came from that function, but I have no clue on how to solve this.
Here's what I got:

$("#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>

A:

The problem is return false; in the click handler. That's equivalent to event.preventDefault();. The default action of clicking on a label is to click on the element that the label is associated with by the for attribute; return false; prevents that from happening, so clicking on the label doesn't check the button.
I'm not sure why you have that in the click handler in the first place. All it does is prevent clicking on the label from working.

$("#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>

