JSFiddle - React, Tailwind, and code Playground

by Pratik Bhonsle

JavaScript

$(function() {
    function validate(id) {
        var enabled = ($("input[name='attendance" + id + "']:checked").val() == 'Yes');
        if (enabled) {
            for ($i = 1; $i <= 3; $i++) {
                nameEnabled = ($("input[name='attendance" + $i + "']:checked").val() == 'Yes');
                console.log(nameEnabled);
                if (nameEnabled && $("#colour" + $i)[0].selectedIndex == 0 && $("#shade" + $i)[0].selectedIndex == 0) {
                    alert('Please select colour and shade preference ' + namesArray[$i - 1]);
                    return false;
                }
                //Please select option is selected              
                else if (nameEnabled && $("#colour" + $i)[0].selectedIndex == 0) {
                    alert('Please select colour preference for ' + namesArray[$i - 1]);
                    return false;
                }
                //Please select option is selected              
                else if (nameEnabled && $("#shade" + $i)[0].selectedIndex == 0) {
                    alert('Please select shade preference ' + namesArray[$i - 1]);
                    return false;

                }
            }
        }
        return true;
    }

    $("input[name^='attendance']").click(function() {
        var id = this.name.replace('attendance', '');
        $("#colour" + id + ", #shade" + id).prop("disabled", this.value == 'No');

    });
    $("input:submit").click(function() {
        var retVal = true;
        //$.each([1, 2,3,4,5], function(i, val){
        //             retVal = (validate(val) && retVal);
        //          });
        retVal = validate(1);
        return retVal;
    });

    $("input[name=attendance1]:checked").triggerHandler('click');
    $("input[name=attendance2]:checked").triggerHandler('click');
    $("input[name=attendance3]:checked").triggerHandler('click');

    $("#colour").submit(function() {
        console.log("submitted");
        if...