jQuery如果输入字段为空，如何禁用单击功能

Question

И有一些步骤卡，我有输入字段。对于每张卡，我有一个“下一步”按钮，用于更改视图。

但是如果表单中有空输入字段，我想阻止此按钮。

码：

var $currentCard, $nextCard, $prevCard;

var animationEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

var operationName = ["Order number", "Oparation barcode", "Nest number", "Layers number", "Cycles number"];

$('.next').on('click', function (e) {

        e.preventDefault();

        $currentCard = $(this).parent().parent();

        $nextCard = $currentCard.next();

        $('#bar li').eq($('.card').index($nextCard)).addClass('active');

        var inAnimation = 'animated slideInLeft';

        $currentCard.hide();

        $nextCard

            .show()

            .addClass(inAnimation)

            .one(animationEvents, function () {

                $(this).removeClass(inAnimation);

            });

});

$('.prev').on('click', function (e) {

    e.preventDefault();

    $currentCard = $(this).parent().parent();

    $prevCard = $currentCard.prev();

    $('#bar li').eq($('.card').index($currentCard)).removeClass('active');

    var inAnimation = 'animated slideInRight';

    $currentCard.hide();

    $prevCard

        .show()

        .addClass(inAnimation)

        .one(animationEvents, function () {

            $(this).removeClass(inAnimation);

        });

});

.title {

    margin-bottom: 30px;

    color: #020304;

}

.card {

    max-width: 500px;

    width: 90%;

    background: white;

    margin: 50px ;

    padding: 20px 30px;

    border-radius: 2px;

    -webkit-animation-duration: 0.2s;

    animation-duration: 0.2s;

}

.cardTitle {

    text-align: center;

    text-transform: uppercase;

    margin: 0;

}

.cardText {

    margin: 25px 0 40px 0;

    color: grey;

    text-align:center;

}

.card:not(:first-of-type) {

    display: none;

}

.actions {

    text-align: center;

}

因此，您可以看到我有一个函数来检查某个输入字段是否为空，当我按下Next时，它将转到下一页。

我需要的是按下“ 下一步”按钮以验证输入字段是否已填充，然后再继续。

Answer 1

我添加了这个jQuery代码：if($('.POBarcode').is(":visible")){&nbsp; if($('.POBarcode').val().length == 0) return false;}if($('.Operation_barcode').is(":visible")){&nbsp; if($('.Operation_barcode').val().length == 0) return false;}我还在class以下元素中添加了一个<input type="text" class="POBarcode" placeholder="PO barcode"><input type="text" placeholder="Operation barcode" class="Operation_barcode">现在你不能按下一个按钮之前input是visible有一个value。工作演示

Answer 2

你可以在下一次点击中做这样的事情：if&nbsp;($('input',&nbsp;$currentCard).val()&nbsp;===&nbsp;''&nbsp;&&&nbsp;$(this).text()&nbsp;!==&nbsp;'Register&nbsp;new&nbsp;PO')&nbsp;{ &nbsp;&nbsp;&nbsp;return;}