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

Disable submit button until all hidden inputs have a value

本文关键字：隐藏 输入 有一个 提交 按钮      更新时间：2023-09-26

我有一个带有隐藏输入的简单表单，我正在尝试检查每个隐藏输入是否都有值。如果所有隐藏的输入都有一个值，则禁用或启用提交按钮。一旦用户通过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

});

有什么想法吗？

您可以在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
});

您的trim函数没有按照您接受的方式运行，请按如下方式删除它：

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

将其放入模糊函数中，以确定是否所有隐藏的输入都有非空值。

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

您在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

});
相关文章：