单击禁用按钮添加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");
});