Enable/Disable options in a related dropdown without triggering all dropdowns with the same class
I recently posted concerning a demo found at
http://beta.acinonyxsim.com/demo. I am back with another question that didn't quite fit in with my previous one:
When adding base markings, certain markings are only limited to Tan/White. At this time, I am listing all available colors when you first click add a base marking, then disabling and re-enabling as needed. This seems to work, but on change it takes the value and places it in all .base_marking_color classed dropdowns. My code is below:
$('div#base_markings').on('change', 'select.base_marking', function(){
$('select.base_marking option[value="'+$(this).data('index')+'"]').prop('disabled', false);
$(this).data('index', this.value);
$('select.base_marking option[value="'+this.value+'"]:not([value=""])').prop('disabled', true);
$(this).find('option[value="'+this.value+'"]:not([value=""])').prop('disabled', false);
var base_marking = $.trim($(this).find('option:selected').text());
var base_marking_color = $(this).closest('div.base_marking_options').find('select.base_marking_color').val();
if (base_marking == 'Back Leg' || base_marking == 'Blanket' || base_marking == 'Cape' || base_marking == 'Cloak' || base_marking == 'Cloak 2' || base_marking == 'Coat' || base_marking == 'Dorsal' || base_marking == 'Edging' || base_marking == 'Forehead' || base_marking == 'Front' || base_marking == 'Inners' || base_marking == 'Legs' || base_marking == 'Limbs' || base_marking == 'Lower Belly' || base_marking == 'Mask' || base_marking == 'Nooks' || base_marking == 'Parts' || base_marking == 'Paws' || base_marking == 'Royal (Wild Only)' || base_marking == 'Sable 1' || base_marking == 'Sable 2' || base_marking == 'Saddle' || base_marking == 'Shoulder' || base_marking == 'Smudge' || base_marking == 'Spots' || base_marking == 'Swabs' || base_marking == 'Tail' || base_marking == 'Top' || base_marking == 'Trim' || base_marking == 'Under Flank (Wild Only)' || base_marking == 'Upper Belly') {
$('select.base_marking_color option[value="5"]').prop('disabled', false);
$('select.base_marking_color option[value="4"]').prop('disabled', false);
$('select.base_marking_color option[value="7"]').prop('disabled', false);
$('select.base_marking_color option[value="2"]').prop('disabled', false);
$('select.base_marking_color option[value="3"]').prop('disabled', false);
$('select.base_marking_color option[value="8"]').prop('disabled', false);
$('select.base_marking_color option[value="6"]').prop('disabled', true);
$('select.base_marking_color option[value="1"]').prop('disabled', true);
if (base_marking_color == '' || base_marking_color == 6 || base_marking_color == 1) {
$('select.base_marking_color').val('5');
}
else {
$('select.base_marking_color').val(base_marking_color);
}
}
else if (base_marking == 'Bottom' || base_marking == 'Chest' || base_marking == 'Collar' || base_marking == 'Tail End' || base_marking == 'Tail Tip' || base_marking == 'Tips' || base_marking == 'Toes' || base_marking == 'Unders 1' || base_marking == 'Unders 2' || base_marking == 'Unders 3' || base_marking == 'Unders 4' || base_marking == 'Unders 5' || base_marking == 'Unders 6' || base_marking == 'Unders 7' || base_marking == 'Unders 8 (Wild Only)') {
$('select.base_marking_color option[value="5"]').prop('disabled', true);
$('select.base_marking_color option[value="4"]').prop('disabled', true);
$('select.base_marking_color option[value="7"]').prop('disabled', true);
$('select.base_marking_color option[value="2"]').prop('disabled', true);
$('select.base_marking_color option[value="3"]').prop('disabled', true);
$('select.base_marking_color option[value="8"]').prop('disabled', true);
$('select.base_marking_color option[value="6"]').prop('disabled', false);
$('select.base_marking_color option[value="1"]').prop('disabled', false);
if (base_marking_color == '' || base_marking_color != 6 && base_marking_color != 1) {
$('select.base_marking_color').val('6');
}
else {
$('select.base_marking_color').val(base_marking_color);
}
}
processDemo();
});
I apologize for any formatting errors, being blind makes it difficult to format things correctly.
In summary, this code <i>should</i> do the following:
- Disable and re--enable the necessary colors when a base marking changes
- Maintain the user's selection if they are changing between markings with the same color set (example: white/tan for bottom, chest, unders, etc.)
Thank you so much for any help given.