0

我有 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> 箱&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，我的逻辑将不起作用。

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 回答