JSFiddle - React, Tailwind, and code Playground

by ShankarSangoli

HTML

<input name="discount1" type="radio" id="Yes1" value="Yes" checked="checked"/>
             Yes
             <br />
    <input name="discount1" type="radio" id="No1" value="No" />No
           </h3></td>
           <td>
             <select name="colour1" id="colour1" >
               <option selected="selected">Please Select</option>
               <option>red</option>
               <option>blue</option>
               <option>green</option>
             </select>
           </td>
           <td><h3>
                     <select name="shade1" id="shade1" >
               <option selected="selected">Please Select</option>
               <option>dark</option>
               <option>light</option>
               <option>medium</option>
             </select>
           </td>
         </tr>
         <tr>
           <td>
           </td>
           <td>
           <h3>
             <input name="discount2" type="radio" id="Yes2" value="Yes" checked="checked"/>
             Yes
             <br />
    <input name="discount2" type="radio" id="No2" value="No" />No
           </h3>
           </td>
           <td>
                   <select name="colour2" id="colour2" >
               <option selected="selected">Please Select</option>
               <option>red</option>
               <option>green</option>
               <option>blue</option>
             </select>
           </td>
           <td>
           <select name="shade2" id="shade2" >
               <option selected="selected">Please Select</option>
               <option>dark</option>
               <option>light</option>
               <option>medium</option>
             </select>
           </td>
             
             <input type="button" value="Submit" />

JavaScript

$( function(){    
            function validate(id){       
                var enabled = ($("input[name='discount" + id + "']:checked").val() == 'Yes');         
                if(enabled){              
                    //Please select option is selected              
                    if($("#colour" + id)[0].selectedIndex == 0){                 
                    alert('Please select color');                  
                    return false;             
                    }              
                    //Please select option is selected              
                    if($("#shade" + id)[0].selectedIndex == 0){                  
                        alert('Please select shade');                  
                        return false;             
                    }   
                }     
                return true;    
            };

            $("input[name^='discount']").click(function() {  
               
                var id = this.name.replace('discount', '');      
                $("#colour" + id + ", #shade" + id).prop("disabled", this.value == 'No');         
                validate(id);    
            });      
           $("input:button").click(function(){         
               var retVal = false;
               $.each([1, 2], function(i, val){
                  retVal = (validate(val) || retVal);
               });
                return retVal;   
           }); 
         });