jQuery提交按钮禁用/启用异常：选择框选中后按钮仍未激活

Hey there! Let's get this sorted out. The root of your problem is that your current jQuery code only monitors keyup events on text and password inputs—it completely ignores changes to the <select> dropdown. So when you pick a sex option, the code never runs the check to see if all fields are filled, hence the submit button stays disabled.

Here's the revised code that fixes this:

Modified JavaScript #

$(document).ready(function() {
    // Initialize submit button as disabled
    $('#sbtbtn').attr('disabled', 'disabled');

    // Create a reusable function to check all required fields
    function checkFormFields() {
        const target0 = $('#target0').val();
        const target1 = $('#target1').val().trim();
        const target2 = $('#target2').val().trim();
        const target3 = $('#target3').val().trim();
        const target4 = $('#target4').val().trim();

        // Check if all fields have non-empty values
        if (target0 !== '' && target1 !== '' && target2 !== '' && target3 !== '' && target4 !== '') {
            $('#sbtbtn').removeAttr('disabled');
        } else {
            $('#sbtbtn').attr('disabled', 'disabled');
        }
    }

    // Attach event listeners to ALL required fields (including select)
    $('input[type=text], input[type=password], select').on('keyup change', function() {
        checkFormFields();
    });
});

Key Changes Explained #

• Added select to event listeners: Now the code reacts to both keyup (for text/password inputs) and change (for the dropdown) events, so every interaction with required fields triggers the validation check.
• Reusable validation function: We pulled the field-checking logic into a separate function to avoid repetition and make the code easier to maintain. We also added .trim() to input values to ignore whitespace-only entries (a small UX improvement).
• Simplified document ready wrapper: Your original code had nested $(function() {}) inside $(document).ready()—they do the same thing, so we removed the redundant layer.

Quick HTML Cleanup Note #

The <select> tag in your HTML has a type="select" attribute which isn't necessary (select elements don't use the type attribute). You can safely remove it without breaking functionality:

<select name="sex" id="target0">
    <option></option>
    <option>male</option>
    <option>female</option>
</select>

Full Working Code #

<title>Disable submit button until all form's fields are filled</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="myDiv">
    <center>
        <form action="#" id="Once">
            <table border="1">
                <tr>
                    <td><strong>Sex:</strong></td>
                    <td>
                        <select name="sex" id="target0">
                            <option></option>
                            <option>male</option>
                            <option>female</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><strong>username:</strong></td>
                    <td><input type="text" name="username" id="target1" /></td>
                </tr>
                <tr>
                    <td><strong>password:</strong></td>
                    <td><input type="password" name="password" id="target2" /></td>
                </tr>
                <tr>
                    <td><strong>Confirm password:</strong></td>
                    <td><input type="password" name="password2" id="target3" /></td>
                </tr>
                <tr>
                    <td><strong>Email</strong></td>
                    <td><input type="text" name="email" id="target4" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <center><input type="submit" value="submit" id="sbtbtn" /></center>
                    </td>
                </tr>
            </table>
        </form>
    </center>
</div>

<script>
$(document).ready(function() {
    $('#sbtbtn').attr('disabled', 'disabled');

    function checkFormFields() {
        const target0 = $('#target0').val();
        const target1 = $('#target1').val().trim();
        const target2 = $('#target2').val().trim();
        const target3 = $('#target3').val().trim();
        const target4 = $('#target4').val().trim();

        if (target0 !== '' && target1 !== '' && target2 !== '' && target3 !== '' && target4 !== '') {
            $('#sbtbtn').removeAttr('disabled');
        } else {
            $('#sbtbtn').attr('disabled', 'disabled');
        }
    }

    $('input[type=text], input[type=password], select').on('keyup change', function() {
        checkFormFields();
    });
});
</script>

内容的提问来源于stack exchange，提问作者Itz Moosa E. Mohd