Uncheck the box by clicking on the label with jQuery

Question

I need to disable checked radio buttons with jQuery. The buttons themselves are hidden, so I use clicks on shortcuts to trigger this. So far I:

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 is codepen

But this does not cancel the switch. I understand that this is not standard functionality for radio buttons, but I need the user to be able to return the set of switches to their unselected state, if necessary, and also restrict them to choosing one of the many parameters. Any help was greatly appreciated.

Greetings

Mike

Answer 1

/ , event.preventDefault(), ( , checked prop true) , / , :

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

Answer 2

:
- data-num.
-Play data-num , / .
, :

$(document).ready(function(){
  $("input").click(function(){
       $("input").not(this).attr("data-num", 1); 
       var data = $(this).attr("data-num")
       if(data==1){
          data = 2
          $(this).attr("data-num", data); 
          return;
       }
       if(data==2){
          data = 1
          $(this).prop('checked', false);
          $(this).attr("data-num", data); 
          return;
       }
  })  
})

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" data-num="1">
    <label for="form1_areas1">London</label>
  </div>
  <div class="radio-holder">
    <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands" data-num="1">
    <label for="form1_areas2">West Midlands</label></div>
</form>