Question

非常愚蠢的问题，但似乎无法得到它。我默认情况下禁用表单上的提交按钮。并且想要启用如果没有任何输入具有实现类无效或它们是空的，使用空但无法弄清楚为什么检查无效的无效$(this).is( ".invalid" )代码如下：

$(document).ready(function() {
$('input').keyup(function() {

    var empty = false;

    $('input').each(function() {
        if (($(this).val().length == 0) || $(this).is( ".invalid" )) {
            empty = true;
        }
    });
    var submitBtn = $('.btn[type="submit"]');
    if (empty) {
        submitBtn.attr('disabled', 'disabled');
    } else {
        submitBtn.attr('disabled', false);
    }
});
});  


 <div class="container">   
    <div class="row">
        <div class="col s12 ">
            <div id="main" class="card">
                <div class="card-content deep-orange lighten-5">
                        <span class="card-title">Ajax Form</span>
                    <form action="submit">
                        <div class="row">
                            <div class="input-field col s6">
                                <input id="first_name" type="text" class="validate">
                                <label for="first_name">First Name</label>
                            </div>
                            <div class="input-field col s6">
                                <input id="last_name" type="text" class="validate">
                                <label for="last_name">Last Name</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s6">
                                <input id="email" type="email" class="validate">
                                <label for="email">Email</label>
                            </div>
                            <div class="input-field col s6">
                                <input id="phone" type="text" class="validate">
                                <label for="phone">Input</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input id="age_input" type="number" class="validate">
                                <label for="age_input">Age</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input id="noyp_input" type="number" class="validate">
                                <label for="noyp_input">Number</label>
                            </div>
                        </div>
                        <button class="btn waves-effect waves-light" type="submit" name="action" disabled="disabled">Submit
                            <i class="material-icons right">send</i>
                        </button>
                    </form>  
                </div>    
            </div>    
        </div>
    </div>
</div>

Answer 1

我有三个建议要做，并给出关于你的代码的警告：

首选prop至attr （请参阅this answer）。
将标志设置为true后，中断循环;没有必要再搜索了。
只需将empty标记的结果传递给disabled属性。
请注意input的内容可以通过复制粘贴，拖放或通过控制台和键盘事件（例如keyup）进行更改，但不会检测到此类更改。

<强>代码：

/* ----- JavaScript ----- */
$(document).ready(function() {
  $('input').keyup(function() {
    /* Create a flag. */
    var empty = false;
    
    /* If any input is empty or invalid set the flag to true and break. */
    $('input').each(function() {
      if (!this.value.length || $(this).is(".invalid")) {
        empty = true;
        return false;
      }
    });

    /* Set 'disabled' to the value of the flag. */
    $('.btn[type="submit"]').prop("disabled", empty);
  });
});

/* For the other buttons. */
$("#add").click(()=>$('input').addClass("invalid"));
$("#remove").click(()=>$('input').removeClass("invalid"));

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="text"/>
  <input type="text"/>
  <input type="text"/>
</div>

<div>
  <button id = "add">Add 'invalid'</button>
  <button id = "remove">Remove 'invalid'</button>
  <button class="btn" type="submit" disabled>Submit</button>
</div>

Answer 2

更好地使用input事件代替keyup，因为用户可以粘贴该值。取消注释代码段中的input class="invalid"以测试该情况。

＆＃13;

$(function() {

  $('input').on('input', function() {
    $('.btn[type="submit"]').prop('disabled',
      $.grep($('input'), function(i) {
        return i.value === '' || $(i).hasClass('invalid')
      }).length > 0)
  });

  $('form').on('submit', function(e) {
    e.preventDefault;
    alert('submit')
  })

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input><br>
  <input><br>
  <!-- input class="invalid"><br -->
  <input><br>
  <button class="btn" type="submit" disabled>GO</button>
</form>

＆＃13;

检查课程是否有效

2 个答案: