Question

我有一个包含三个输入的表单（[type=text]，多个输入[type=checkbox]和一个禁用的提交按钮）。如果用户填写了所有三个文字输入并且至少选中了其中一个复选框，我希望启用提交按钮。

我发现这个小提琴在所有三个文本输入上都很有效，但我想添加一个必须至少选中一个复选框的附加条件：

$(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

在复选框中添加class="checkbox"，然后将checkEmpty()修改为：

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;
    }
}

然后在点击时添加事件，复选框为：

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

Answer 2

嘿只在jquery部分添加输入[type = checkbox]，这是您想要的输出，请尝试下面的代码：的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

好的，我现在有一个严重的问题。我使用wordpress并添加：

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

到我的header.php和footer.php，因为我需要它们，所以插件正在加载。自从我添加它们后，Stephan Sutter的工作解决方案已经不再适用了。如果我填写所有必填表格，仍然会禁用提交按钮。如果我删除它们再次工作，但我需要它们用于插件。

我认为这是因为该插件会在页面中添加输入文本。有什么方法可以使用代码frm Stephan来定义表单ID = #addmovie-form？

使用jquery禁用表单提交按钮input = text和input = checkbox

3 个答案: