如果未输入文本，则保持按钮禁用答案

【问题标题】：Keep button disabled if text is not entered如果未输入文本，则保持按钮禁用
【发布时间】：2012-08-14 16:57:28
【问题描述】：

我想实现这样的目标。我有 4 个文本字段和一个表单提交所需的选择字段。我想让按钮保持禁用状态，除非文本字段有值并且从下拉列表中选择了一个选项。我的代码是here

我遇到的问题是，每当我在 4 个文本字段中输入数据时，尽管下拉菜单被选择为默认文本，但按钮却被启用。在我更改下拉菜单后，它会被永久禁用。

【问题讨论】：

标签： jquery

【解决方案1】：

试试这个 - DEMO

$('#fname, #lname, #zipcode').on("keyup", action);
$('#location').on("change", action);

function action() {
    if( $('#fname').val().length > 0 && $('#lname').val().length > 0 && $('#zipcode').val().length > 0 && $('#location').val() != '' ) {
        $('#submit').prop("disabled", false);
    } else {
        $('#submit').prop("disabled", true);
    }   
}

【讨论】：

@Zoltan：我猜代码中有一个错误，当首先输入所有文本字段然后选择下拉菜单时，按钮被禁用

【解决方案2】：

使用 JQuery：

var text_valid = false, dropdown_valid = false;
$("input[type='text'].required:focus").each(function() {
    if($(this).val().length > 0){
        text_valid = true
    }
}

if($("#mydropdown option:selected").length){
    dropdown_valid = true;
}

if(text_valid && dropdown_valid) {// Our form is valid
    $("#mybutton").removeAttr("disabled");
}
else { // Our form is invalid
    $("#mybutton").attr("disabled", "disabled");
}

【讨论】：

【解决方案3】：

我想你可以数出有多少输入有文本

$('input').keyup(function(){
    var count = $('input:text').filter(function(){return $(this).val() == "";}).size();
});

但是，由于您使用的是选择标签，我认为您还应该检查它是否有值。

$('input').keyup(function(){
    var count = $('input:text').filter(function(){return $(this).val() == "";}).size()
            + $('select:text').filter(function(){return $(this).val() == "";}).size();
    if(count > 0){
        $('#submit').button({disabled: true});
    }else{
        $('#submit').button({disabled: false});
    }
});

【讨论】：