Question

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

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

var submit = 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(submit);
orderCheck.change(submit);
orderSelect.change(submit);

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

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

这是一个更好理解的信息：

http://jsfiddle.net/zVS3t/38/

Answer 1

我已经在小提琴上测试了它，它在小提琴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);

Answer 2

如果你想使用一个返回单个结果的函数，那么jQuery＆＃39; $.each()可能会成为你的朋友。

e.g。

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

<强> JS

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

http://jsfiddle.net/zVS3t/42/

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

3 个答案: