Custom Options - Enable if Option selected additional options available

[C0D3M0Nk]

Hi Guys and Gals,

I am having a brain fart and want to try and avoid a long cumbersome jQuery or JavaScript functions for the options with different names referencing the same abilities per product.
i.e. Monogram is named with ID M1 for Product 1 but Monogram on product 2 has an ID Name M2.

Let me explain more on what I am trying to do and hopefully someone has the answer I need. I listed a link to the product I am working on to get a better idea of what I am playing around with now and I will try to get as much detail as possible to get this sorted.

Product 1 (i.e. https://www.truewind.com/regatta-tote.html )
I want the ability that when option "Monogram" is selected to yes or the ability to have this a check box so when selected then additional features I have on this page become visible such as thread colors, font style and what letters they want to put on, otherwise these options are not visible.  I also want that when option Monogram is selected then I need the page to error check and make sure the user filled out the selected options with no errors before add to cart is available.

Is there a simple way to do all this? I was going to go in and figure out all of the ID Tags of the Monogram Option for every product and write the jQuery code to hide the other options on load and do the manipulation that way but I figured there is an easier way, or at least I hope so and I am just not seeing it.

Oh and if you have code to assist, I would greatly apprecaite a starting point to this interesting issue.

Thanks for your time,
Brad

[sanjeevkr]

Hi,

Apply classes  "no-display" and "monogram-option" to all addtional  options of monogram, which you want to hide. and also give class "monogram-required" to all required options.

jQuery("checkbox#checkboxid").click(function()
{
1       if(jQuery(this).is(":checked"))
		{
		  jQuery('.monogram-option').removeClass('no-display');
		  jQuery('.monogram-required').addClass('required-entry');
        }
		else
		{
		 jQuery('.monogram-option').addClass('no-display')
		 jQuery('.monogram-required').removeClass('required-entry')
			
		}

   })