Question

我有3个选择框

如果任何选择框或两个选择框的计数等于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> 箱</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>

这是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，则我的逻辑无效。

Answer 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（'禁用'）;规则，因为你可以很容易地完成你所追求的和我没有时间:)

但是这个解决方案应该有助于解决您的逻辑问题。

在更改时禁用基于其他选择框值的选择框

1 个答案: