如何在输入字段与文件为空时禁用表单提交按钮？

Got it, let's get this working exactly how you need! Your current code only checks the textarea inputs, but we need to expand the logic to include the file upload field too. Here's the fix:

Step 1: Update the JavaScript Logic #

We'll create a reusable validation function that checks both the textareas and the file input, then trigger this function whenever either a textarea is updated or a file is selected.

$(document).ready(function () {
    // Set initial state: disable the submit button
    $('#button').attr('disabled', true);

    // Reusable validation function to check all required fields
    function validateForm() {
        // Check if any textarea has actual content (trim whitespace to ignore blank spaces)
        var hasTextContent = $('textarea').filter(function() {
            return $.trim($(this).val()) !== '';
        }).length > 0;

        // Check if a file has been selected in the upload field
        var hasSelectedFile = $('#artist_photo').get(0).files.length > 0;

        // Enable button if either text exists OR a file is selected; disable otherwise
        $('#button').attr('disabled', !hasTextContent && !hasSelectedFile);
    }

    // Trigger validation when any textarea is typed in (keyup + input covers all text entry scenarios)
    $('textarea').on('keyup input', validateForm);

    // Trigger validation when a file is selected or removed from the upload field
    $('#artist_photo').on('change', validateForm);
});

Key Improvements Explained: #

• Reusable Logic: The validateForm function keeps our code clean and avoids repeating the same check across multiple event listeners.
• Whitespace Handling: Using $.trim() ensures textareas with only spaces don't count as "filled"—this prevents false positives where the button enables from accidental spacebar presses.
• File Input Support: We added a change event listener for the file upload field, since file selections don't trigger keyup events.
• Precise Condition: The button stays disabled only when both all textareas are empty and no file is selected. If either has content, the button becomes active.

Note on Your HTML: #

Your existing HTML doesn't need any changes—this JS works seamlessly with the form structure you already have. We target the button by its ID (#button) instead of a generic $('button') to avoid affecting other buttons on your page (if you add them later).

内容的提问来源于stack exchange，提问作者Tio Uzumaki