jquery - テキストが入力されていない場合、ボタンを無効にする

Question

このようなことを達成したい。フォームの送信に必要な 4 つのテキスト フィールドと 1 つの選択フィールドがあります。テキストフィールドに値があり、ドロップダウンからオプションが選択されていない限り、ボタンを無効にしたままにします。私のコードはここにあります

私が抱えている問題は、4 つのテキスト フィールドにデータを入力するたびに、ドロップダウンがデフォルトのテキストに選択されているにもかかわらず、ボタンが有効になることです。ドロップダウンを変更すると、永久に無効になります。

Answer 1

これを試してください -デモ

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

Answer 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");
}

Answer 3

テキストを含む入力の数を数えることができると思います

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

ただし、selectタグを使用しているので、値があるかどうかも確認する必要があると思います。

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