Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/445.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将复选框/选择和输入的控制功能合并为一个_Javascript_Jquery_Select_Checkbox_Input - Fatal编程技术网

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

Javascript 将复选框/选择和输入的控制功能合并为一个,javascript,jquery,select,checkbox,input,Javascript,Jquery,Select,Checkbox,Input,我有以下函数可以启用/禁用表单中的提交按钮。这三个单独运行都很好,但如果可能的话,如何将它们合并为一个呢 现在,如果我选择了一个选项和一个复选框,按钮将被启用,但是如果我取消选择一个选项,提交按钮将再次被禁用,但是如果一个复选框或选项被选中,或者一个字段被填充,我想让他启用 $('#order input[type="text"]').change(function(){ if(($(this).val().length > 0)) $('#submit').prop(

我有以下函数可以启用/禁用表单中的提交按钮。这三个单独运行都很好,但如果可能的话,如何将它们合并为一个呢

现在,如果我选择了一个选项和一个复选框,按钮将被启用,但是如果我取消选择一个选项,提交按钮将再次被禁用,但是如果一个复选框或选项被选中,或者一个字段被填充,我想让他启用

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

});
对不起,我的英语不太好

提前谢谢你的帮助

编辑

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

试试这个:

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更改:-请选择-

用于检查所有输入的功能:

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);
    }
}
简单更改和输入顺序事件:


演示:不工作:-如果我没有选择;并输入警报文本;检查警报顺序;我得到的结果总是错误的,而对于复选框则是正确的链接到您的代码。怎么了?这个答案几乎能满足你的需求。您只需将每个&&更改为| |,它就会工作。@bdrx它不会工作。我改变了,并与或| | |自己试试;您可以看到,如果在第二、第三、第四、ecc、输入字段中键入内容,它将不起作用,在第二、第三、第四个选择框中也不起作用。如果要检查多个元素的值,请选中此JSFIDLE:如果这是您想要的,那么我将编辑我的答案。您的代码不起作用。我已经尝试过了,但它只在第一个选择框、第一个文本元素和所有复选框上有效。奇怪……也许你误解了我的问题:如果选择/填写了某个选项、复选框或文本框,我需要启用提交按钮。同样在select中,由于php文件的原因,我需要将值设置为空。此外,html文件是动态生成的,可能非常庞大。您的需求不明确。是否只需要一种类型的输入?因此,用户可以选择任何有效的下拉选项以启用“提交”按钮,或选中任何复选框以启用,或在任何文本字段中输入文本以。@bdrx是的,仅需要输入类型,但复选框中的“其他”和“选择选项”应从整个代码中排除。我也尝试过,但它只适用于第一个选择框、第一个文本元素和所有复选框。
$( "#order" ).on('change input',function() {
    checkinputs();
});