Magento 1.9 : How to add required class in custom options, if a custom checkbox selected?

Question

On product detail page, product's custom options not display till then custom checkbox("Interested in Embroidery") not checked. When checkbox checked then custom option display.

I want that, when checkbox not checked custom options not require when checked, custom options require.

Please check following link:

http://superbuniforms.com/magento/medical-lab-coat-unisex-sky-blue.html

Here, a checkbox "Interested in Embroidery". When you checked checkbox then open a section which is "Product Custom options" which is not required. But I want to required all options when checkbox is checked otherwise not required.

Please suggest.

Thanks

• Sushivam: You can build your custom options using setOptions(array())...For better clarity, try this : magento2-blog.com/…
• Sushivam: Ok did you try this: magento.stackexchange.com/questions/73756/…
• Chandra Bhushan: Hello Sir, please open this URL superbuniforms.com/magento/…. Here, I have added some custom option when you check checkbox"Interested in Embroidery", then display. All option are required, but I want when any customer checked "Interested in Embroidery" check then custom option require otherwise not.
• Sathish: @chandraBhushan added a answer

Answer 1

By Default Magento having no options what you want, You need to add extra logic in your existing jquery scripts to make required (just you can add/remove classes "required-entry" then magento will handle when addtocart)

jQuery(document).ready(function($) {
 $('#embroideryCB1').click(function(){
 $('#embroidery').slideToggle("fast");
 $('#embroidery').find('.product-custom-option').toggleClass('required-entry');
 });
});

if you need to add required options for specific field under hidden div. you can add extra class for custom options alone which was you need to required options.

Edited for top accept radio button:

jQuery(document).ready(function($) {
 $('#embroideryCB1').click(function(){
 $('#embroidery').slideToggle("fast");
 $('#embroidery').find('.product-custom-option:not([type="radio"])').toggleClass('required-entry');
 $('#embroidery').find('.product-custom-option[type="radio"]').toggleClass('validate-one-required-by-name');
 });
 });

• Chandra Bhushan: its working fine but not working with multiple radio button because all radio button require. Please check I have added your given code.
• Sathish: you can use :not() to leave radio button validation
• Sathish: updated and not tested, its a one suggestion
• Chandra Bhushan: sir, I need radio button require but if one select then other radio button will not require.
• Sathish: @chandraBhusan updated answer def works, if answer helps please accept as correct answer it will be help for others