On Change disable select box based on other select box values

Question

I have 3 select boxes

If the count of any select box or two select boxes is equal to 2 then the remaining select boxes should be disabled.

Here is 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> 箱</label></li>
                            <li><span>カフェラテ</span></br>
                            <select name="02345[]" class="cinch_set1">
                                <option value="0"></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select><label> 箱</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> 箱</label></li>
                        </ul>

Here is 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');
    }
});

I am able to disble the third select box if count of two select boxes is 2

But my logic is not working if count of single select box is 2.

Answer 1

You are better off using arrays. Consider the following code as I have added a function that checks if at any one time, the selection is more than 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>

Your 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);    
});

On Fiddle: http://jsfiddle.net/zgpXf/62/

I have not added a reset or .removeAttr('disabled'); rule as that can be easily done with what you are after AND that I am out of time :)

But this solution should help solve your logic issues.