Disable submit button if all three of three specific dropdown fields are empty

问题

There are four dropdowns in the form. One is optional. Of the other three, at least one has to be chosen. I have a script that I'm using on a form with one field, that disables submit until a selection is made. But I can't figure out and can't find how to adapt it to be disabled until at least one of three specific dropdowns has a selection made. Here's the current script:

jQuery(function($) {
    $('#ssbbcmodal-attribute').change(function() {
        var empty = false;
        $('#ssbbcmodal-attribute').each(function() {
            if ($(this).val() == null) {
                empty = true;
            }
        });
        if (empty) {
            $('#ssbbcmodal-submit').attr('disabled', 'disabled');
        } else {
            $('#ssbbcmodal-submit').removeAttr('disabled');
        }
    });
})()

UPDATE 1

I might have thought of a way to do it. Will be back soon with update.

UPDATE 2

OK, my way to do it didn't work, probably because I'm guessing at this. Here's what I tried:

jQuery(function($) {
var empty = false;

    $('#sseomodal-level').change(function() {
        var levelempty = false;
        $('#sseomodal-level').each(function() {
            if ($(this).val() == null) {
                levelempty = true;
            }
        });
    });
    $('#sseomodal-username').change(function() {
        var userempty = false;
        $('#sseomodal-username').each(function() {
            if ($(this).val() == null) {
                userempty = true;
            }
        });
    });
    $('#sseomodal-logged').change(function() {
        var loggedempty = false;
        $('#sseomodal-logged').each(function() {
            if ($(this).val() == null) {
                loggedempty = true;
            }
        });
    });     

if (levelempty === true && userempty === true && loggedempty === true)
    {empty = false}
 if (empty) {
            $('#sseomodal-submit').attr('disabled', 'disabled');
        } else {
            $('#sseomodal-submit').removeAttr('disabled');
        }
})()

The disabled attribute is never removed with this, i.e., it doesn't work.

回答1:

jsFiddle Demo here

The three selects you must test can each have a class (something like require_one).

When any select box is changed, check if it has that class. If so, then remove the disabled attribute from the Select button.

Example code:

$('#mySubmit').attr('disabled','disabled');

$('select').change(function(){
    if ( $(this).hasClass('require_one') ){
        $('#mySubmit').removeAttr('disabled');
    }
});

For your own code, try reducing it to just this and see if it works:

$(document).ready(function() {
    $('#sseomodal-submit').attr('disabled', 'disabled');

    $('[id^=sseomodal]').change(function() {
        var myId = $(this).attr('id');
        if (myId == 'sseomodal-level' || myId == 'sseomodal-username' || myId == 'sseomodal-logged') {
            $('#sseomodal-submit').removeAttr('disabled');
        }
    });

}); // END document.ready

来源：https://stackoverflow.com/questions/19253708/disable-submit-button-if-all-three-of-three-specific-dropdown-fields-are-empty

标签

jquery

attr

conditional-statements

submit-button

javascript