将复选框/选择和输入的控制功能合并为一个

merge control functions for checkboxes/ selects and inputs into one

本文关键字：合并 一个 功能 控制 复选框 选择 输入      更新时间：2023-09-26

我有以下函数可以启用/禁用表单中的提交按钮。这三个函数都可以单独工作，但如果有可能，如何将它们合并为一个？

现在，如果我选择了一个选项和一个复选框，按钮会被启用，但如果我取消选择一个选项，提交按钮会再次被禁用，但我想让他在选择一个复选或选项或填写一个字段时启用。

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

对不起，我的英语不太好。

提前感谢您的帮助。

编辑

链接到小提琴以更好地理解：

http://jsfiddle.net/zVS3t/4/

试试这个：

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

请注意，我们将jQuery引用分配给变量，这样我们就可以多次使用它们，而无需每次都遍历DOM。

看看这个：

更新：

html更改：<option value="0">--please select--</option>

检查所有输入的功能：

function checkinputs() {
    // if the select is defauld OR we have text inputs empty OR we dont have even one checkbox checked
    if( $("#order select").val() == "0" || $('#order input[type="text"]').filter(function(){return this.value == ""}).length || !$('#order input[type="checkbox"]').is(':checked') ) {
        $('#submit').prop('disabled', true);
    } else {
        $('#submit').prop('disabled', false);
    }
}

"#order":的简单change和input事件

$( "#order" ).on('change input',function() {
    checkinputs();
});

演示：http://jsfiddle.net/zVS3t/30/

相关文章：