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
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
source
share