Add CSS on click of a disabled button

Question

Following various other posts I've disabled a submit button until options have been selected from the form.

What I'd like to do is highlight the select boxes when the disabled button is clicked. I'm thinking the easiest way to do this is to apply a css border-color to the select boxes with a click function. But I'm not sure how to achieve this.

My script so far:

$('#submitorder').prop('disabled', true);

function updateFormEnabled() {
    if (verifyAdSettings()) {
        $('#submitorder').prop('disabled', false);
    } else {
        $('#submitorder').prop('disabled', true);
    }
}

function verifyAdSettings() {
    if ($('#course1choice').val() != '' && $('#course2choice').val() != '') {
        return true;
    } else {
        return false
    }
}

$('#course1choice').change(updateFormEnabled);

$('#course2choice').change(updateFormEnabled);

My html:

<form id="productchoices">
<select name="92" id="course1choice">
<option value="">Select Course 1</option>
<option value="659">Lesson Planning </option>
<option value="660">Teaching One to One </option>
<option value="661">Teaching Teenagers </option>
<option value="662">Teaching Young Learners </option>
</select>

<select name="91" id="course2choice">
<option value="">Select Course 2</option>
<option value="655">Lesson Planning </option>
<option value="656">Teaching One to One </option>
<option value="657">Teaching Teenagers </option>
<option value="658">Teaching Young Learners </option>
</select>

            <button type="submit" id="submitorder">Book Now</button>
</form>

Answer 1

Please look the below example for you I have modified some fields.

<form id="productchoices">
        <select name="92" id="course1choice" class="choice">
            <option value="">Select Course 1</option>
            <option value="659">Lesson Planning </option>
            <option value="660">Teaching One to One </option>
            <option value="661">Teaching Teenagers </option>
            <option value="662">Teaching Young Learners </option>
        </select>
        <select name="91" id="course2choice" class="choice">
            <option value="">Select Course 2</option>
            <option value="655">Lesson Planning </option>
            <option value="656">Teaching One to One </option>
            <option value="657">Teaching Teenagers </option>
            <option value="658">Teaching Young Learners </option>
        </select>
        <button type="submit" id="submitorder">Book Now</button>
    </form>
$(document).ready(function () {
$("#submitorder").prop("disabled", true);
$('.choice').on('change', function () {
    if ($(this).val() == '') {
        $("#submitorder").prop("disabled", true);
    } else {
        $("#submitorder").prop("disabled", false);
    }
});

});

Let me know if any query. Example code

Answer 2

Instead of disabling the submit button, you can add a handler to it that highlights the select boxes and suppresses submission by returning false.

CSS:

.highlighted {
    border-color: red; /* or whatever */
}

Javascript:

$('#submitorder').submit(function() {
    var course1choice = $('#course1choice');
    if (course1choice.val() == '') {
        course1choice.addClass("highlighted");
        return false; // prevents submission
    }

    var course2choice = $('#course2choice');
    if (course2choice.val() == '') {
        course2choice.addClass("highlighted");
        return false; // prevents submission
    }

    return true; // allows submission
});

$("select").change(function() {
    $(this).removeClass("highlighted");
});