0

私は3つの選択ボックスを持っています

いずれかの選択ボックスまたは2つの選択ボックスの数が2に等しい場合は、残りの選択ボックスを無効にする必要があります。

これがHTMLです

                        <ul>
                            <li><span>抹茶</span></br>
                            <select name="01345[]" class="cinch_set1">
                                <option value="0"></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select><label> 箱&lt;/label></li>
                            <li><span>カフェラテ&lt;/span></br>
                            <select name="02345[]" class="cinch_set1">
                                <option value="0"></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select><label> 箱&lt;/label></li>
                            <li><span>ストロベリー    </span></br>
                            <select name="24190[]" class="cinch_set1">
                                <option value="0"></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select><label> 箱&lt;/label></li>
                        </ul>

これがJqueryです

$('select').change(function(){
    var disable = false;
    first_sel = parseInt($('#cinchForm select.cinch_set1:eq(0)').val());
    second_sel = parseInt($('#cinchForm select.cinch_set1:eq(1)').val());
    third_sel = parseInt($('#cinchForm select.cinch_set1:eq(2)').val());
    alert(first_sel+"-"+second_sel+"-"+third_sel);
    count = first_sel+second_sel+third_sel;
    if(count == 2){
        if(first_sel == 0){
            $('#cinchForm select.cinch_set1:eq(0)').attr('disabled', 'disabled');
            $('#cinchForm select.cinch_set1:eq(1)').removeAttr('disabled');
            $('#cinchForm select.cinch_set1:eq(2)').removeAttr('disabled');
        }
        else if(second_sel == 0){
            $('#cinchForm select.cinch_set1:eq(1)').attr('disabled', 'disabled');
            $('#cinchForm select.cinch_set1:eq(0)').removeAttr('disabled');
            $('#cinchForm select.cinch_set1:eq(2)').removeAttr('disabled');
        }
        else if(third_sel == 0){
            $('#cinchForm select.cinch_set1:eq(2)').attr('disabled', 'disabled');
            $('#cinchForm select.cinch_set1:eq(1)').removeAttr('disabled');
            $('#cinchForm select.cinch_set1:eq(0)').removeAttr('disabled');
        }
    }else{
        $('#cinchForm select.cinch_set1:eq(0)').removeAttr('disabled');
        $('#cinchForm select.cinch_set1:eq(1)').removeAttr('disabled');
        $('#cinchForm select.cinch_set1:eq(2)').removeAttr('disabled');
    }
});

2つの選択ボックスの数が2の場合、3番目の選択ボックスを無効にすることができます

しかし、単一の選択ボックスの数が2の場合、私のロジックは機能しません。

4

1 に答える 1

1

配列を使用する方が良いでしょう。いつでも選択が2を超えるかどうかをチェックする関数を追加したので、次のコードを検討してください。

<form id="cinchForm">
                            <ul>
                            <li><span>Apples</span></br>
                            <select name="01345[]" class="cinch_set1">
                                <option value="0"></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select><label>Each</label></li>
                            <li><span>Oranges</span></br>
                            <select name="02345[]" class="cinch_set1">
                                <option value="0"></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select><label>Each</label></li>
                            <li><span>Bananas</span></br>
                            <select name="24190[]" class="cinch_set1">
                                <option value="0"></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select><label>Each</label></li>
                        </ul>
</form>

<div id="myresults">is empty</div>

あなたのJS：

$('select').change(function(){
     var disable = false;
    var totalSelection = 0;
    var selected = $(this).val();
    var first_sel = $('#cinchForm select.cinch_set1:eq(0)').val();
    var second_sel = $('#cinchForm select.cinch_set1:eq(1)').val();
    var third_sel = $('#cinchForm select.cinch_set1:eq(2)').val();
     var mySelectValues=new Array(first_sel,second_sel,third_sel);
for (var i = 0; i < mySelectValues.length; i++) {
    totalSelection += parseInt(mySelectValues[i]);
}    


    //If one is already selected, the next value CAN NOT be two
         if (totalSelection > 2){
            alert('Value can not be more than 2');   
            $(this).val('1');
             totalSelection = totalSelection -1;
        }

    //If total selection if more than two, disable all selection boxes EXCEPT those with value
    if (totalSelection >= 2){
    $('#cinchForm select').attr('disabled', 'disabled');       
    }


    //HTML output
    $("#myresults").html(totalSelection);    
});

フィドルについて：http： //jsfiddle.net/zgpXf/62/

リセットまたは.removeAttr（'disabled'）;を追加していません。それはあなたが求めているもので簡単に行うことができ、私は時間切れであるというルール:)

しかし、このソリューションはロジックの問題を解決するのに役立つはずです。

于 2013-03-07T01:25:46.427 に答える