1

さて、私はしばらくの間ウェブサイトをコーディングしてきました、そしてこれは私が答えを見つけられなかった最初の「乗り越えられない」問題です、それで今私はあなた、専門家に目を向けます。

私のフォームには、3つのドロップダウンメニュー、1つのテキストボックスと1つの無効なチェックボックスがあります。ユーザーが各ドロップダウンメニューからオプションを選択し、テキストボックスに何かを書き込んだときに、チェックボックスが有効になるように機能させたいと思います。

私は解決策を探していたときにこのコードを見つけました、そしてそれは私の問題に非常に似ています。ただし、別のドロップダウンメニューを追加しようとすると、最初のメニューからオプションを選択したときにボタンが有効になり、2番目のメニューが完全に無視されます。申し訳ありませんが、私はJquery / JavaScriptを初めて使用します。両方のメニューでクラス名が同じ場合は、そのように機能するはずです（jQueryクラスセレクター:('。dropdown'））。

テキストボックスを使用した同様のコードも見つかりました。これらのコードを組み合わせる方法がわからないので、希望どおりに動作します。

4

3 に答える 3

1

ドロップダウンのデフォルト値はvalue=""だと思います 

   $('#form_submit_button').click(function(){  

        $('.checkbox').attr('disabled',true);
        var all_selected = true;

        $('.dropdown').each(function(){

             if(!$(this).val())
             {
                  all_selected = false; 
             }
        });


        if(!$('#text_box').text())
        {
           all_selected = false;
        }

        if(all_selected)
        {      
            $('.checkbox').attr('disabled',false);
        }       
  });
于 2012-08-25T02:06:26.910 に答える
1

こちらをご覧ください：http：//jsfiddle.net/JKmkL/109/

$(document).ready(function() {
    $('.required').change(function() {
        var done=true;
        $('.required').each(function(){
            if(!$(this).val()){
                $('.myCheckBox').prop('disabled',true);
                done=false;
                return false;
            }
        });
        if(done){$('.myCheckBox').prop('disabled',false);}
    });
});

requiredそして、要素にクラスを追加します。

編集：

上記のコードは、デフォルト<option>にが含まれていることを前提としていますvalue=""。そうでない場合は、http：//jsfiddle.net/JKmkL/114/を使用できます。

$(document).ready(function() {
    $('.required').change(function() {
        var done=true;
        function quit(){
            $('.myCheckBox').prop('disabled',true);
            done=false;
            return false;
        }
        $('.required.dropdown').each(function(){
            if($(this).children(':selected').hasClass("disablenext")){
                return quit();
            }
        });
        $('.required[type=text]').each(function(){
            if(!$(this).val()){
                return quit();
            }
        });
        if(done){$('.myCheckBox').prop('disabled',false);}
    });
});

編集2：

チェックボックスがオンになっているときにdivを表示し、チェックボックスが無効になっているときに非表示にする場合は、

JavaScript：

$(document).ready(function() {
    $('.required').change(function() {
        var done=true;
        function quit(){
            $('.myCheckBox').prop('disabled',true).removeAttr('checked');
            done=false;
            $('#div2').addClass('hide');
            return false;
        }
        $('.required.dropdown').each(function(){
            if($(this).children(':selected').hasClass("disablenext")){
                return quit();
            }
        });
        $('.required[type=text]').each(function(){
            if(!$(this).val()){
                return quit();
            }
        });
        if(done){$('.myCheckBox').prop('disabled',false);}
    });
    $('.myCheckBox').click(function(){
        $('#div2')[(this.checked?'remove':'add')+'Class']('hide');
    });
});

CSS：

.hide{display:none}

こちらをご覧ください：http：//jsfiddle.net/JKmkL/133/

于 2012-08-25T02:18:04.680 に答える
0

まず、3つのドロップダウンのIDが、、、および;と呼ばれているd1とd2しd3ます。テキストボックスはtxt; チェックボックスはchkです。次に、チェックボックスをいつ有効にする必要があるかを決定する関数を定義できます。

function shouldEnableCheckbox() {
    var nonEmptyFields = $("#d1,#d2,#d3,#txt").filter(function() {
        return this.value;    
    });
    return nonEmptyFields.length == 4;
}

基本的に、4つの要素すべてを選択し、空でない要素をフィルタリングして、結果のフィルタリングされた配列を4と比較します。trueの場合は、チェックボックスを有効にする必要があります。

次に、changeイベントハンドラーを4つの要素すべてに割り当て、前の関数を呼び出し、結果をdisabledチェックボックスのプロパティに割り当てます。

$("#d1,#d2,#d3,#txt").change(function() {
    $("#chk").prop("disabled", !shouldEnableCheckbox());
});​

これが機能しているDEMOと、IDの代わりにクラスを使用して必要な要素を識別する別の機能しているより一般的なDEMOです。

于 2012-08-25T02:18:11.590 に答える