函数仅适用于每个元素的第一个子元素

Question

考虑以下禁用/启用提交按钮的代码：

 var orderText = $('#order input[type="text"]'); var orderCheck = $('#order :checkbox'); var orderSelect = $('#order select').not('#sel_option_img'); var enableOrDisableSubmit = function() { var textEntered = orderText.val().length > 0; var orderChecked = orderCheck.not('.others').is(':checked'); var orderSelected = $(orderSelect).val() != ''; if (textEntered || orderChecked || orderSelected) $('#submit').prop('disabled', false); else $('#submit').prop('disabled', true); }; orderText.change(enableOrDisableSubmit); orderCheck.change(enableOrDisableSubmit); orderSelect.change(enableOrDisableSubmit);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="order"> <select> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <select> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <select> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <select class="second"> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <input type="text" value=""><br><br> <input type="text" value=""><br><br> <input type="text" value=""><br><br> <input type="text" value=""><br><br> <input type="checkbox" value="somevalue"> <input type="checkbox" value="somevalue"> <input type="checkbox" value="somevalue"><br> <input type="submit" value="submit" name="submit" id="submit" disabled> </form>

该代码仅适用于每个元素的第一个子元素（输入和选择元素），但不适用于第二个、第三个、第四个等，除了正常工作的复选框。

任何以正确方式编写代码的提示？

Answer 1

我已经在 fiddle 上测试过它在 fiddle http://jsfiddle.net/AmanVirdi/7P3ab上很好用。 我在您的代码中更改了两行：

var orderText = $('#order input[type="text"]');
var orderCheck = $('#order :checkbox');
var orderSelect = $('#order select').not('#sel_option_img');

var enableOrDisableSubmit = function() {
    var textEntered = $(orderText).filter(function(){
       return $(this).val() != '';}).length > 0;  // here filter method is added for textboxes
    var orderChecked = orderCheck.not('.others').is(':checked');
    var orderSelected = $(orderSelect).filter(function(){
       return $(this).val() != '';}).length > 0;   // here filter method is added for select

    if (textEntered || orderChecked || orderSelected)
        $('#submit').prop('disabled', false);
    else
        $('#submit').prop('disabled', true);

};
orderText.change(enableOrDisableSubmit);
orderCheck.change(enableOrDisableSubmit);
orderSelect.change(enableOrDisableSubmit);

完整片段：

 var orderText = $('#order input[type="text"]'); var orderCheck = $('#order :checkbox'); var orderSelect = $('#order select').not('#sel_option_img'); var enableOrDisableSubmit = function() { var textEntered = $(orderText).filter(function() { return $(this).val() != ''; }).length > 0; // here filter method is added for textboxes var orderChecked = orderCheck.not('.others').is(':checked'); var orderSelected = $(orderSelect).filter(function() { return $(this).val() != ''; }).length > 0; // here filter method is added for select if (textEntered || orderChecked || orderSelected) $('#submit').prop('disabled', false); else $('#submit').prop('disabled', true); }; orderText.change(enableOrDisableSubmit); orderCheck.change(enableOrDisableSubmit); orderSelect.change(enableOrDisableSubmit);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="order"> <select> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <select> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <select> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <select class="second"> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <input type="text" value=""><br><br> <input type="text" value=""><br><br> <input type="text" value=""><br><br> <input type="text" value=""><br><br> <input type="checkbox" value="somevalue"> <input type="checkbox" value="somevalue"> <input type="checkbox" value="somevalue"><br> <input type="submit" value="submit" name="submit" id="submit" disabled> </form>

Answer 2

如果您想使用返回单个结果的函数，那么 jQuery 的$.each()很可能是您的朋友。

例如

var textEntered = true;
orderText.each( function(){
  if ( $(this).val().length == 0 ) {
    textEntered = false;
    // maybe also highlight the field here
    $(this).css( 'background-color', '#fcc' );
  }
});
if (!textEntered) { ... }

Answer 3

代码片段：

 var orderText = $('#order input[type="text"]'); var orderCheck = $('#order :checkbox'); var orderSelect = $('#order select').not('#sel_option_img'); var submit = function() { var notEmpty = $("#order input[type!='submit'], #order select").filter(function() { return $(this).is(':checkbox') ? $(this).is(':checked') : $.trim($(this).val()).length > 0 }).length == 0; $('#submit').prop('disabled', notEmpty); }; orderText.change(submit); orderCheck.change(submit); orderSelect.change(submit);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="order"> <select> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <select> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <select> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <select class="second"> <option value="">--please select--</option> <option value="12">option1</option> <option value="13">option2</option> </select> <br><br> <input type="text" value=""><br><br> <input type="text" value=""><br><br> <input type="text" value=""><br><br> <input type="text" value=""><br><br> <input type="checkbox" value="somevalue"> <input type="checkbox" value="somevalue"> <input type="checkbox" value="somevalue"><br> <input type="submit" value="submit" name="submit" id="submit" disabled> </form>