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

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

我能够disble第三个选择框，如果两个选择框数为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（'disabled'）;规则，因为这可以很容易地完成与你以后的东西，我没时间:)

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