I'm trying to set this condition in a form:
If the #Size (from a dropdown selection) = 'extra-cab' AND a radio select button called 'canopy-14x-select' (from a group of radio buttons called 'Canopy') are both selected, then the checkbox with a class called .rack-kit is deselected.
I'm not sure how to nest these into each other, I've attempted it below but it isn't working.
Any help would be much appreciated.
$('#Size').on('change', function() {
if (this.value == 'extra-cab') {
if ($(this).attr("id") == "canopy-14x-select") {
$('.rack-kit input[type="checkbox"]:checked').prop('checked', false).trigger('change');
}
}
Thank you in advance :)
Assuming that the radio buttons share the same [name] attaribute and everything is in a <form>, reference it as $('[name="X"]:checked') X being the [name] of radio button group. This example unchecks when select is 2 and radio is 3.
$('form').on('change', function(e) {
if ($('#A').val() === '2' && $('[name="B"]:checked').val() === '3') {
$('.D').prop('checked', false);
}
});<form>
<select id='A'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select><br>
<input name='B' type='radio' value='1'><label>1</label><br>
<input name='B' type='radio' value='2'><label>2</label><br>
<input name='B' type='radio' value='3'><label>3</label><br>
<input class='D' type='checkbox'>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>