Question

在其他各个帖子之后，我已禁用提交按钮，直到从表单中选择了选项。

我想要做的是在点击禁用按钮时突出显示选择框。我认为最简单的方法是使用单击功能将css border-color应用于选择框。但我不确定如何实现这一目标。

到目前为止我的脚本：

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

}）;

如果有任何疑问，请告诉我。 Example code

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

单击禁用按钮添加CSS

2 个答案: