Uncheck checked radio button by clicking on label using jQuery

Question

I need to uncheck checked radio buttons using jQuery. The buttons themselves are hidden so I am using clicks on the labels to trigger this. So far I have:

HTML

<form>
  <h4>Where would you like to work?</h4>
  <div class="radio-holder">
    <input id="form1_areas1" name="areas" type="radio" value="area/london">
    <label for="form1_areas1">London</label>
  </div>
  <div class="radio-holder">
    <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
    <label for="form1_areas2">West Midlands</label></div>
</form>

SCSS

form {
  max-width: 500px;
  margin: 0 auto;
  padding-top: 20px;
}
div.radio-holder {
  padding: 10px;
}
input[type="radio"] {
 display:none;
 &:checked+label {
  border-bottom: 2px solid #222222;
  padding-bottom: 0px;
 }
}

JQUERY

$(document).ready(function(){
  $("form input[type='radio']:checked + label").click(function(){
    $(this).prev().prop( "checked", false );
  });
});

Here a CodePen

But this isn't unchecking the radio button. I understand this is not standard functionality for radio buttons, but I need the user to be able to revert the set of radio buttons to their unselected state if desired, while also limiting them to selecting one from the set of options. Any help greatly appreciated.

Cheers

Mike

Answer 1

To enable/disable same radio, you have to use event.preventDefault() to prevent default behavior (enabling check box when clicking on label, so checked prop will be always set to true) and make radio enable/disable programmatically as shown in the below snippet:

$(document).ready(function(){
  $("label").click(function(e){
    e.preventDefault();
    $check = $(this).prev();
    if($check.prop('checked'))
      $check.prop( "checked", false );
    else 
      $check.prop( "checked", true );
      
    //console.log($check.prop("checked"));
  });
});

form {
  max-width: 500px;
  margin: 0 auto;
  padding-top: 20px;
}
div.radio-holder {
  padding: 10px;
}

input[type="radio"] {
 display:none;
}
input[type="radio"]:checked+label {
  border-bottom: 2px solid #222222;
  padding-bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <h4>Where would you like to work?</h4>
  <div class="radio-holder">
    <input id="form1_areas1" name="areas" type="radio" value="area/london">
    <label for="form1_areas1">London</label>
  </div>
  <div class="radio-holder">
    <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
    <label for="form1_areas2">West Midlands</label></div>
</form>