Question

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


});

任何想法？

Answer 1

您的修剪功能不符合您的要求，请将其删除，如here :

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

Answer 2

将其置于模糊函数内部，以查明所有隐藏的输入是否具有非空值。

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

Answer 3

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

在此处试试：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
});

Answer 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


});

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

4 个答案: