Question

我从Treehouse和CodeSchool等工具中学到了大部分jQuery，所以这些材料看起来很熟悉。

我尝试在提交按钮变为活动状态之前验证表单中的下拉列表。但是，每当我进行选择并输入内容时，提交按钮都不会激活。

以下是我现在所拥有的一个例子：

＆＃13;

function containsBlanks() {
  var blanks = $('.required').map(function() {
    return $(this).val() === "";
  });
  return $.inArray(true, blanks) != -1;
}

function FilledIn() {
  if (containsBlanks()) {
    $('#submit_btn').attr('disabled', 'disabled');
  } else {
    $('#submit_btn').removeAttr('disabled');
  }
}
FilledIn();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<form id="basic_form">
  <select name="lighterColors" id="lighterColors" class="required">
    <option value="">--Select--</option>
    <option value="Blue">Blue</option>
    <option value="Red">Red</option>
  </select>

  <br>

  <label for="name"></label>
  <input type="text" id="name" class="required">
  <br>
  <input id="submit_btn" type="submit">
</form>

＆＃13;

我已将Select选项的值更改为任意随机值，但仍未从submit_btn中删除attr。请帮助提出任何建议。

Answer 1

以下插件可以称为：$('.requiredSelects').validateSelects('#submit_btn');

其中.requiredSelects是必须填写的任何元素的选择器，#submit_btn是按钮的选择器，除非填写所有字段，否则应禁用该按钮。

＆＃13;

(function ($) {
    $.fn.validateSelects = function (btn) {
        var elements = this;
        var invalid = 0;
        // make sure to return here so the pulgin is chainable
        return elements.change(function() { // bind to change event 
            invalid = 0;
            elements.each(function() {
                if ($(this).val() === "") invalid++;
            });
            invalid > 0 ? $(btn).attr('disabled', 'disabled') : $(btn).removeAttr('disabled');
        });
    };
}(jQuery));



$('.requiredSelects').validateSelects('#submit_btn');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<form id="basic_form">
    <select name="lighterColors" id="lighterColors" class="requiredSelects">
        <option value="">--Select--</option>
        <option value="Blue">Blue</option>
        <option value="Red">Red</option>
    </select>
    <select name="lighterColors" id="lighterColors" class="requiredSelects">
        <option value="">--Select--</option>
        <option value="Blue">Blue</option>
        <option value="Red">Red</option>
    </select>
    <br>
    <label for="name"></label>
    <input type="text" id="name" class="required" />
    <br>
    <input id="submit_btn" type="submit" disabled />
</form>

＆＃13;

如何使用jQuery验证表单中的下拉菜单？

1 个答案: