單擊禁用按鈕添加CSS

Question

在其他各種帖子之后，我禁用了“提交”按鈕，直到從表單中選擇了選項。

我想做的是單擊“禁用”按鈕時突出顯示選擇框。 我在想最簡單的方法是通過單擊功能將CSS邊框顏色應用於選擇框。 但是我不確定如何實現這一目標。

到目前為止，我的腳本是：

$('#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);

我的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

請為您查看以下示例，我已經修改了一些字段。

<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);
    }
});

}）;

讓我知道是否有任何疑問。 范例程式碼

Answer 2

除了禁用提交按鈕外，您還可以向其添加一個處理程序，該處理程序突出顯示選擇框並通過返回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");
});