A dropdown validation error occurs if no value is selected on the associated radio button

Question

I have a form with two radio buttons: "Yes" and "No". If "Yes" is selected, the user selects what they want from two drop-down menus. If the user selects "No", the form's JavaScript will grey out both drop-down menus.

My jQuery code is shown below. I added:

if(!$("#discount").prop("disabled") && $("#colour1, #shade1").val() == 'please select'){
    //alert('Please select');
}

but it did not work.

Both radio buttons' name attribute is set to discount . The drop-down menus' id attributes are #colour1 and #shade1 .

The first value of each drop down is "please select":

 $( function(){
        $("input[name='discount']").click(function() {
            $("#colour1, #shade1")
            .prop("disabled", this.value == 'No');
            if(!$("#discount").prop("disabled") && $("#colour1, #shade1").val() == 'please select'){ //alert('Please select'); }. 
        }).click();

    });

Answer 1

Try this.

$( function(){
    $("input[name='discount']").click(function() {
        var isDisabled = (this.value == 'No');
        $("#colour1, #shade1").prop("disabled", isDisabled);

        if(!isDisabled){
             //Please select option is selected
             if($("#colour1")[0].selectedIndex == 0){
                 alert('Please select color');
             }
             //Please select option is selected
             if($("#shade11")[0].selectedIndex == 0){
                 alert('Please select shade');
             }
        }

    });
});