禁用提交按钮，直到所有隐藏的输入都有值答案

【问题标题】：Disable submit button until all hidden inputs have a value禁用提交按钮，直到所有隐藏的输入都有值
【发布时间】：2014-10-20 18:30:41
【问题描述】：

我有一个带有隐藏输入的简单表单，我正在尝试检查每个隐藏输入是否都有值。如果所有隐藏的输入都有一个值而不是禁用或启用提交按钮。一旦用户通过 jquery 单击图像，输入就会被填充。我尝试了多种方法，似乎我错过了一些东西......

<form method="post" action="test.php">  
    <div class="selections" id="accordion">
        <h3>title<div class='status'>Pending</div></h3>
        <div class='select-form'>
            <div class='images'>
                <img src='images/vote.jpg' data-value='data-value'>
                <br/><span>title</span><br/>description
            </div>
            <input type='hidden' class='image-value' name='1' value=''>
        </div>
        <div class='select-form'>
            <div class='images'>
                <img src='images/vote.jpg' data-value='data-value2'>
                <br/><span>title</span><br/>description
            </div>
            <input type='hidden' class='image-value2' name='2' value=''>
        </div>
    </div>
    <input id="submit_button" type="submit" class="submit" value="SUBMIT">
</form>

javascript如下：

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

    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


});

有什么想法吗？

【问题讨论】：

尝试调试过滤器的长度并检查它给你的结果
另外我认为最终的 HTML 对我们来说会比 PHP 更好
由于您使用的是 PHP，因此在遍历类别后在提交上设置禁用会比在不起作用的隐藏字段上使用 jquery blur 容易得多。同样在您的 PHP 中，您没有为任何隐藏输入设置值。如果它们总是空的，这将如何工作？
感谢@PabloMatíasGomez 简化了代码
@FunkDoc 我编辑了帖子，一旦用户单击图像，就会使用查询填充输入。

标签： javascript php jquery html

【解决方案1】：

您可以在img.click() 上调用checkEmpty()，然后通过该函数处理禁用状态。

在这里试试：JSFiddle（点击图片）

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

    function checkEmpty() {
        var res = true;
        $inputs.each( function(i,v){
            if(v.value == ""){
                res = false;
                return false;
            }
        });

      $submit.prop("disabled", !res);    
    }

    $("img").click( function(){
        $(this).parent().parent().find("input[type=hidden]").val("sdf");
        checkEmpty();
    });

    checkEmpty();  //set disabled onload
});

【讨论】：

【解决方案2】：

您的修剪功能没有按照您接受的方式运行，请将其删除，如 here :

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

【讨论】：

【解决方案3】：

把这个放在模糊函数里面，看看是否所有隐藏的输入都有一个非空值。

var empty=false;
$('input[type=hidden]').each(function(){
if($(this).val()==""){
empty=true;
}
});
if(empty){
//DISABLE SUBMIT
}

【讨论】：

【解决方案4】：

您在 JavaScript 变量中使用了不应该使用的 $。工作小提琴：http://jsfiddle.net/keliix06/2f3cv2pk/

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

    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


});

【讨论】：

JavaScript 变量允许以 $ 开头，通常用于区分存储的 jQuery 对象和其他变量。