【问题标题】:merge control functions for checkboxes/ selects and inputs into one将复选框/选择和输入的控制功能合并为一个
【发布时间】:2014-09-13 18:36:36
【问题描述】:

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

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

$('#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/

【问题讨论】:

  • 您的要求不明确。是否只需要其中一种类型的输入?因此,用户可以选择任何有效的下拉选项来启用提交按钮,或者选中任何复选框来启用,或者在任何文本字段中输入文本。
  • @bdrx 是的,只需要输入类型,但复选框中的('.others')('#sel_option_img') 应该从整个代码中排除。我也试过THIS,但它只适用于第一个选择框和第一个文本元素以及所有复选框。

标签: javascript jquery select checkbox input


【解决方案1】:

看看那个:

更新:

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"的简单changeinput事件:

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

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

【讨论】:

  • 您的代码不起作用。我试过THIS,但它只适用于第一个选择框和第一个文本元素以及所有复选框。奇怪...
  • 也许您误解了我的问题:如果选择/填写了其中一个选项、复选框或文本框,我需要启用提交按钮。此外,在选择中我需要将值设为空' php文件的原因。此外,html 文件是动态生成的,可能非常庞大
【解决方案2】:

试试这个:

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。

【讨论】:

  • 不工作 :-(( 如果我这样做 alert(orderSelected);alert(textEntered); alert(orderChecked); 我总是“假”,而对于复选框它很好。
  • http://jsfiddle.net/zVS3t/7/ :链接到您的代码。它有什么问题?
  • 这个答案几乎可以满足您的需求。您只需将每个 && 更改为 ||它会起作用的。
  • @bdrx 不会的。我将 AND (&&) 更改为 OR (||) 自己试试HERE;您会发现,如果您在第二个、第三个、第四个、ecc、输入字段上键入内容,它将不起作用,并且在第二个、第三个、第四个选择框上将不起作用。
  • 如果你想检查多个元素的值,然后检查这个 jsfiddle:jsfiddle.net/zVS3t/43 如果这是你想要的,那么我会编辑我的答案。
猜你喜欢
  • 2013-12-01
  • 2013-08-25
  • 2020-01-20
  • 1970-01-01
  • 2022-12-20
  • 2013-10-21
  • 2014-10-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多