I currently have the below jQuery script that binds a group of check boxes when the value test is selected from the dropdown list of the select html element. As a result, the check boxes act like radio buttons where one checkbox can be checked at one time. My issue is that I need the radio buttons to go back to their default behavior when selecting another value from the select box after the test value has been selected and I can't seem to figure it out. Any help would be greatly appreciated. Please see my below javascript and html code.
$('select').on('change', function() {
$('input.example').prop('checked', false);
if(this.value == 'test')
{
alert("Hello");
$('input.example').bind('change', function() {
$('input.example').not(this).attr('checked', false);
});
}
else if(this.value != 'test')
{
alert("Bye");
$('input.example').unbind('change', function() {
$('input.example').not(this).attr('checked', false);
});
}
});
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />