I'm trying to display a form where a user can select a specific item from a list or a specific category of items from another list. I want them to select one or the other, not both.
I followed this question which solves how to handle this in the backend.
I still need to figure out how to properly show this in the view. I have the following sample which does what I would like to achieve, but I'm wondering if this is the way to go:
$('.formGroup input:checkbox').on('click', function() {
var id = $(this).prop('id');
var groups = $(this).parents('.formGroup').siblings('.formGroup');
var thisGroup = $(this).parents('.formGroup');
$('select', thisGroup).prop('disabled', false);
$.each(groups, function(index, item) {
var checkbox = $('input:checkbox', item);
var select = $('select', item);
checkbox.prop('checked', false);
select.val(-1).prop('disabled', true);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formGroup">
<label>
<input type="checkbox" value="" id="Option1">Select an Item</label>
<select disabled="disabled">
<option value=""></option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
<div class="formGroup">
<label>
<input type="checkbox" value="" id="Option2">Or select a Category</label>
<select disabled="disabled">
<option value=""></option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
</div>