Question

如果前一个表单字段填写正确，我想逐个激活表单字段。

这是我的表格 -

<form>
    <div class="form-group">
        <label for="">First Name</label>
        <input type="text" class="form-control name" placeholder="First Name">
    </div>
    <div class="form-group">
        <label for="">Email address</label>
        <input type="email" class="form-control email" placeholder="Enter email" disabled>
    </div>    
    <div class="form-group">
        <label for="">Phone Number</label>
        <input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled>
    </div>
    <div class="form-group">
        <label for="">Description</label>
        <textarea class="form-control description" rows="3" placeholder="Enter Your Description" disabled></textarea>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

当加载页面时，我想保留除第一个之外的所有表单字段disabled（这里是名字）。如果第一个名字填写正确，那么我需要激活电子邮件归档，如果填写正确，那么我需要激活下一个，依此类推。

所以我尝试了类似的东西 -

$('input.name').keyup(function () {
  if ($(this).val()) {
    $('input.email').removeAttr('disabled');
  } else {
    $('input.email').attr('disabled', true);
  }
});

它仅适用于电子邮件。所以我想知道我如何为别人做这件事。而且我听说使用prop()而不是attr()的人更好。

有谁能告诉我这样做的最佳方法是什么？

这是DEMO，其中包含当前代码

谢谢。

Answer 1

这有效：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<script>
   var field = 2;
$('.form-control').blur(function () {
 if ($(this).val()) {
    $('#'+field).removeAttr('disabled');
    field++;
  } 
});
</script>
</head>
<body>
<form>
    <div class="form-group">
        <label for="">First Name</label>
       <input type="text" class="form-control name" placeholder="First Name" id=1>
    </div>
    <div class="form-group">
        <label for="">Email address</label>
        <input type="email" class="form-control email" placeholder="Enter email" disabled id =2>
    </div>    
    <div class="form-group">
        <label for="">Phone Number</label>
        <input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled id=3>
    </div>
    <div class="form-group">
        <label for="">Description</label>
        <textarea class="form-control description" rows="3" placeholder="Enter Your Description" disabled id=4></textarea>
    </div>


    <button type="submit" class="btn btn-default">Submit</button>
</form>
</body>

</html>

我更新了Demo

Answer 2

第一个假设：序列中的所有元素都有“序列”类。

第二个假设：每个元素都有相关的验证器，如果值正确，则赋值“有效”。

$('.sequence').on('change blur', function(event) {
    if ($(event.target).hasClass('valid') {
        $(event.target).next('.sequence').removeAttr('disabled');
    }
});

演示：

<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
    <form>
        <div class="form-group">
            <label for="">First Name</label>
            <input type="text" class="form-control name sequence" placeholder="First Name">
        </div>
        <div class="form-group">
            <label for="">Email address</label>
            <input type="email" class="form-control email sequence" placeholder="Enter email" disabled>
        </div>
        <div class="form-group">
            <label for="">Phone Number</label>
            <input type="text" class="form-control phone sequence" placeholder="Enter Phone Number" disabled>
        </div>
        <div class="form-group">
            <label for="">Description</label>
            <textarea class="form-control description sequence" rows="3" placeholder="Enter Your Description" disabled></textarea>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

    <script>

    function fakeValidator(event) {
        var $element = $(event.target);
        if ($element.val().length >= 3) {
            $element.addClass('valid');
        } else {
            $element.removeClass('valid');
        }
    }

    function enableNextElement(event) {
        var $element = $(event.target);
        if ($element.hasClass('valid')) {
            $element.closest('.form-group')
                .next('.form-group')
                .find('.sequence')
                .removeAttr('disabled');
        }
    }

    $(document).ready(function() {
        $('.sequence').on('change blur keyup', fakeValidator);
        $('.sequence').on('change blur keyup', enableNextElement);
    });

    </script>
</body>
</html>

如果前一个字段填写正确，则激活表单字段

2 个答案: