动态表单未提交

I am working on a dynamic registration form for an event with limited capacity, but I am having an issue where the form is not submitting under certain circumstances. Allow me to explain...

One of the form fields asks the user to select the number of seats they would like to reserve. The field is complemented with a counter that lists the number of available seats remaining. The counter calculates the total number of seats occupied by totaling the relevant column from a MySQL database, then subtracting that number from the total number of seats available. Here's how that looks...

<div id="seat_field">
    <select name="seats" id="seats" class="field" required>
        <option value="" disabled selected>select</option>
        <option value="0">None</option>
        <option value="1">1</option>
        <option value="2">2</option>                    
    </select>                      
</div>

<?php
    $servername = "localhost";
    $username = "***";
    $password = "***";
    $dbname = "***";

    $conn = new mysqli($servername, $username, $password, $dbname);

    $query = mysqli_query($conn, "SELECT SUM(seats) AS total_seats FROM event");

    $row = mysqli_fetch_assoc($query);

    $total_seats = $row['total_seats'];
    $available_seats = 44-$total_seats;

    echo "<div><div id='available_seats' class='seats'>$available_seats</div><div id='seats_remaining' class='seats'>&nbspseats remaining</div></div>";             
?>

When all of the seats are taken ($available_seats == 0), I replace the select element with a checkbox that allows a user to indicate whether or not their party should be added to a waitlist. Here's the script, which is at the bottom of the body...

$(document).ready(function() {
    var available_seats = document.getElementById("available_seats").innerHTML;

    if (available_seats == 0){
        $("#seats").hide();
        $("#seats").prop('required', false);
        $("#seat_field").prepend("<strong>Check to add your party to the bus waiting list</strong>&nbsp&nbsp<input type='checkbox' name='waitlist' /> ");
    };
});

The select element is successfully hidden and the checkbox prepends. However, the form does not submit... no console errors, nothing happens. Can anyone offer any suggestions? Thanks very much.

Editing - Adding the complete form...

<form action="volunteer.php" method="post" name="volunteer_form" id="plumb_form">
    <input type="text" name="first_name" value="" class="field" id="first_name" required>
    <input type="text" name="last_name" value="" class="field" id="last_name" required>
    <input type="text" name="email" value="" class="field" id="email" required>

    <div id="seat_field">
    <select name="seats" id="seats" class="field" required>
        <option value="" disabled selected>select</option>
        <option value="0">None</option>
        <option value="1">1</option>
        <option value="2">2</option>                    
    </select>                      
</div>

<?php
    $servername = "localhost";
    $username = "***";
    $password = "***";
    $dbname = "***";

    $conn = new mysqli($servername, $username, $password, $dbname);

    $query = mysqli_query($conn, "SELECT SUM(seats) AS total_seats FROM event");

    $row = mysqli_fetch_assoc($query);

    $total_seats = $row['total_seats'];
    $available_seats = 44-$total_seats;

    echo "<div><div id='available_seats' class='seats'>$available_seats</div><div id='seats_remaining' class='seats'>&nbspseats remaining</div></div>";             
?>

    <input type="submit" name="submit" value="Submit" id="submit"></p>

</form>

<script>

$(document).ready(function() {
    var available_seats = document.getElementById("available_seats").innerHTML;

    //THIS IS THE PART THAT'S CAUSING ME TROUBLE...
    if (available_seats == 0){
        $("#seat").hide();
        $("#seats").prop('required', false);
        $("#seat_field").prepend("<strong>Check to add your party to the bus waiting list</strong>&nbsp&nbsp<input type='checkbox' name='waitlist' value='1' /> ");
    };



    $("#plumb_form").submit(function() {

        var first_name = document.forms["plumb_form"]["first_name"].value;
        var last_name = document.forms["plumb_form"]["last_name"].value;
        var email = document.forms["plumb_form"]["email"].value;
        var seats = document.forms["plumb_form"]["seats"].value;


        if(first_name == "" || last_name == "" || email == "" || phone == "" || number == "" || seats == ""){
            return false;
        }


        else if (seats > available_seats) {
            alert("There are not enough seats remaining for your party. Please reduce the number of seats needed or email Darren at dklein@nycaudubon.org to place your party on a waiting list.");
            return false;
         }

        else{
            $("#submit").hide();
            //YOU CAN IGNORE THIS LAST LINE, JUST A LITTLE ANIMATION THING, NOT RELEVANT HERE
            $("#thing").append('<div id="submitting" class="buttonText animated flash">Submitting...</br><div class="againStop" id="stop">Please wait</div></div>');
        };
    });
});

</script>