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

Question

我已经从Treehouse和CodeSchool等工具中学习了大部分jQuery，所以这些材质可能看起来很熟悉。

我试图验证表单内的下拉之前提交按钮激活。但是，每当我做出选择并输入内容时，提交按钮都不会激活。

这里是什么，我现在所拥有的一个例子：

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();

<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>

我已经改变了选择选项的值，以任何随机值，但仍然无法删除的submit_btn的ATTR 。请帮助任何建议。

Answer 1

下面的插件可以这样调用：$('.requiredSelects').validateSelects('#submit_btn');

哪里.requiredSelects对于那些必须填写并#submit_btn是，除非填写了所有字段中应禁用按钮选择的任何元素的选择

(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');

<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>