单击禁用的按钮添加 CSS

Add CSS on click of a disabled button

本文关键字：添加 CSS 按钮 单击      更新时间：2023-09-26

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

我想做的是在单击禁用按钮时突出显示选择框。我认为最简单的方法是使用单击功能将 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);

我的网页：

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

请为您查看以下示例，我修改了一些字段。

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

}）;

如果有任何疑问，请告诉我。示例代码

您可以向其添加一个处理程序，以突出显示选择框并通过返回 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");
});
相关文章：