Disable form submit button input=text and input=checkbox with jquery

Question

I have a form with three inputs ( [type=text] , multiple input [type=checkbox] and a disabled submit button). I want the submit button to be enabled if a user has filled in all three text-inputs and has selected at least one of the checkboxes .

I found this fiddle which works great on all three text-inputs, but I'd like to add the additional condition that at least one checkbox must be selected:

$(document).ready(function() {
    var $submit = $("input[type=submit]"),
    $inputs = $('input[type=text], input[type=password]');

    function checkEmpty() {
        // filter over the empty inputs
        return $inputs.filter(function() {
            return !$.trim(this.value);
        }).length === 0;
    }

    $inputs.on('blur', function() {
        $submit.prop("disabled", !checkEmpty());
    }).blur(); // trigger an initial blur
});

fiddle

Answer 1

Add class="checkbox" in the checkboxes then modify checkEmpty() to this:

function checkEmpty() {
    var text= $inputs.filter(function() {
        return !$.trim(this.value);
    }).length === 0;
    var checkbox = false;
    if ($(".checkbox:checked").length > 0) {
       checkbox = true;
    }
    if(text == true && checkbox == true){
        return true;
    }else{
        return false;
    }
}

Then add the event on click for the checkboxes which is:

$(".checkbox").on("click", function(){
    $submit.prop("disabled", !checkEmpty());
});

Answer 2

Hey just add input[type=checkbox] only in jquery part, here is your desired output, try below code: Index.html

<form method="POST" action="">
    User Name: <input name="Username" type="text" size="14" maxlength="14" /><br />
    hobbies:<input type="checkbox" name="cricket">Cricket<input type="checkbox" name="football">football<input type="checkbox" name="hockey">hockey<br>
    <input type="submit" value="Login" name="Submit" id="loggy">
</form>
<script   src="https://code.jquery.com/jquery-1.12.4.js"   integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="   crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    var $submit = $("input[type=submit]"),
        $inputs = $('input[type=text], input[type=checkbox]');

    function checkEmpty() {
        return $inputs.filter(function() {
            return !$.trim(this.value);
        }).length === 0;
    }

    $inputs.on('blur', function() {
        $submit.prop("disabled", !checkEmpty());
    }).blur();
});
</script>

Answer 3

Ok i have a serious problem now. I'm using wordpress and added:

<?php wp_head(); ?>
<?php wp_footer(); ?>

To my header.php and footer.php, cause i need them so a plugin is getting loaded. Since i added them the working solution from Stephan Sutter isn't working anymore. The submit button is still disabled if i fill in all required forms. If i remove them it works again, but i need them for the plugin.

I think it is because the plugin adds input text to the page. Is there any way i can use the code frm Stephan for a defined form ID=#addmovie-form?